• 리액트를 사용하는 이유: 최소 단위의 렌더링을 위해, 새로운 정보를 자동적으로 refresh 해준 다는 점에서 편리
• useState(): 변수, 변수를 제어하는 함수로 구성되며 변하는 값을 제어, 해당 부분의 리렌더링을 위함
• props: 태그의 속성 값을 함수의 아규먼트 처럼 컴포넌트에 값을 전달해준다.
• useEffect(): 코드의 실행 시점을 관리할 수 있는 선택권을 얻는 방어막 같은 존재, 디펜던시가 없을 경우 최초 1회 실행, 있을 경우 해당 값이 변할 경우 실행한다. 이 때 디펜던시는 여러개 입력이 가능하다.
- 실행시키고자 하는 함수와 React.js가 이벤트를 주시하게끔 하는 dependency로 이루어져있어 불필요한 리렌더링을 피하기 위해 자주 사용됨
즉, useEffect는 state의 상태를 감지 변경이 있을 때란 해당 컴포넌트를 랜더링한다.
useState(function(), []) [] 로 3가지 경우의 수 존재 ex) a, b 스테이트
1. 빈 배열을 넣는 경우, 최초 1회 랜더링 될 때만 실행한다.
2. [a] 하나의 state만 넣는 경우 a가 변경될 경우만 랜더링한다.
3. [a, b] a나 b중 하나가 값이 변경 될 때 랜더링한다.
useEffect 를 쓰는 이유는?
렌더링이 계속 된다면, 특히 특정 api를 불러오게 되는 경우 계속해서 불러오는 문제가 생길 수 있다.
state를 변경할 때, 계속해서 렌더링 되는 문제점이 존재한다. 많은 state가 존재한다면 성능 저하 문제가 발생할 수 있다. 이런 문제를 해결하기 위해 사용한다.
✔️ 부모 컴포넌트에서 리렌더링이 일어날 경우 모든 자식들이 리렌더링이 된다.(use memo)
✔️ propType을 설치하고 props의 타입을 지정해 줄 수 있다. 이 때 isRequired로 필수값을 지정 가능
