ReactJS에서의 마지막 중요한 컨셉이다.
state(데이터를 저장하는 방식, state 는 modifier라는 state를 변화시킬 수 있고 동시에 랜더링도 다시 시키는 함수가 따라온다)
props(부모 컴포넌트가 랜더링될때 자식 컴포넌트도 랜더링이 당연히 되는데 동일한 컴포넌트의 경우에 데이터를 전달하는 방식을 가르킴. 데이터를 전달해서 그것을 바탕으로 다르게 랜더링을 해줄 수 있다. props는 일종의 부모 컴포넌트가 자식에게 데이터를 전달하는 방식을 가르킨다.) (props 가 Object 안에 property 랑 다르게 JSX 태그 안에 넣어서 보내줄 수 있는 걸 props 라고 하잖아)
effct (마지막 대장)
CRA 에서 작성하고 있기 때문에 React.useState() 이런식으로 적을 필요없이 useState() 만 적어주면 된다.
CRA와 VScode를 사용하고 있기 때문에, on 만 써줘도 이렇게 컴포넌트에 붙일 수 있는 많은 이벤트리스너를 확인할 수 있다.
필요성
state을 change 해왔고 그때마다 다시 실행되는 것에 익숙했다.
가끔은, 계속 다시 반복해도 되는 코드가 있지만
하지만 가끔은 그렇게 하지 않고, component 처음 render 될때에만 실행되길 원할 수 있다.
(react-memo는 변화가 없으면 다시 랜더링하지 않는것)
현재 코드 상으로는 그럴 수가 없다. state가 바뀔때마다 매번 이 console.log 가 실행이 될 것이다. 가끔 첫번째로 render할때만 코드를 실행시키고 싶을 수 있다.
예를 들어 API 로 call을 해서 데이터를 받아왔는데 state가 변했다고 해서 다시 API를 call 해서 데이터를 받아 오고 싶지는 않을 것 아닌가.
데이터를 받아 왔고 그걸 유저들에게 보여줄 수 있지만 다시 state 가 변화한다면 또 API 를 불러올테고 이것은 불필요한 일일 것이다.
우리는 어떤 코드들이 첫번째 component render에서만 일어날 수 있게 하는지 배우고 싶다. 처음 한번만.
useEffect
두개의 인자를 받는데 우리가 한번만 실행하고 싶은 코드가 될 것이고, 두번째는 마법같은 인자(다음에)
이렇게 첫번째 인자에서 컴포넌트가 형성될때 딱 한번만 실행되어 컴포넌트의 state의 변화에 관계없이 실행되는 것이 굉장히 유용한 것은 다음과 같이 첫번째 인자에 함수를 넣어 호출할 수 있기 때문이다.
