[ React ] 3. 더 간단하게 만들기

이전 정리에서 배운 것으로 하면, 우리가 count값을 바꿀 때마다 render를 새로 해주어야한다.

 

왜냐하면 변수의 값은 변했지만 그 변한 값을 화면에 띄워주진 않았으니 실제로 변한 것을 감지할 수가 없다.(콘솔 열지 않는 이상)

 

물론, 이벤트가 감지되면 실행되는 함수에 render를 넣으면 되긴하지만, 귀찮다.

 

따라서 여기에 쓸 수 있는 기능이 있다.

 

const [a, setA] = React.useState();

 

이 기능만 설명하면 어떻게 쓰는지는 쉽게 알 수 있을 것 같다.

먼저 React.useState()는 두 개의 값을 배열로 넘겨준다.

[ a라는 데이터 ] +  [ (setA)  a 값을 변화시키기 위한 함수 ]

저 () 가운데에는 a의 초기값을 쓸 수 있다.

 

 

● 사용법

띄우고 싶은 

A의 값을 띄우고싶은 곳에 넣는다. ex) <h1> {A} </h1>

 

특정 이벤트가 감지되었을 때 실행되는 함수 내용에 setA를 넣어준다.

ex) const onClick =() => { setA((current) => current+1); };

 

 

그럼 A의 값이 SetA에 설정된 값에 맞추어 변하고 render까지 자동으로 된다!

 

 

 

---

<h3>Total clicks: {counter}</h3> 이렇게 하게 되면 값은 증가하더라도 그걸 다시 띄워야 하므로 render도 한 세트로 해주어야함

 

이렇게 안 할 수 있는 거 const hello= React.useState((초기 숫자));
array에 2개를 담아주는데 하나는 우리가 다룰 수 있는 데이터, 하나는 리렌더링 해주는 함수

( 그 안에 우리가 어떤 주문을 넣을지 부탁할 수 있음 ) 

 

+state가 바뀌면 react가 component를 다시 생성하여 렌더링해준다.

 

 

 

            modifier(num+1);
=            modifier((current)=>current+1);

같은 결과가 나오지만 current는 함수를 이용한 거라 확실하게 현재 값을 가지고 있는다. 

위 표현처럼 변수로 할 경우에는 저 변수가 다른 곳에서 뒤죽박죽되어 다른 값이 올 수도 있는데 

이건 그냥 현재 띄워진 값에서 +1을 할 수 있으므로 훨씬 안전하다