ReactJS

ReactJS는 새로운 데이터가 들어올 때, 즉 변화가 있을 때 마다 전체를 refresh(새로고침)한다.
새로운 데이터가 들어올 때마다 자동 새고가 되기 때문에 UI 관점에서는 좋다.

useState()

useState()를 사용하면 state가 변할 때 마다 해당하는 component가 refresh(새로고침)된다.
const [value, setValue] = useEffect(디폴트 값)

하지만 계속 재실행하면 안 되는 코드도 있기 마련이다.

• 리액트를 사용하는 이유: 최소 단위의 렌더링을 위해
• useState(): 변수, 변수를 제어하는 함수로 구성되며 변하는 값을 제어, 해당 부분의 리렌더링을 위함
• props: 태그의 속성 값을 함수의 아규먼트 처럼 컴포넌트에 값을 전달해준다.
• useEffect(): 코드의 실행 시점을 관리할 수 있는 선택권을 얻는 방어막 같은 존재, 디펜던시가 없을 경우 최초 1회 실행, 있을 경우 해당 값이 변할 경우 실행한다. 이 때 디펜던시는 여러개 입력이 가능하다.
👉 부모 컴포넌트에서 리렌더링이 일어날 경우 모든 자식들이 리렌더링이 된다.(wa can use memo)
👉 propType을 설치하고 props의 타입을 지정해 줄 수 있다. 이 때 isRequired로 필수값을 지정 가능

useEffect(effect, deps)를 사용하면 코드를 언제 실행할 지 정할 수 있다.

effect: 실행하고 싶은 코드(함수)
dependencies: react.js가 지켜보는 것으로 여기에 넣은 값이 변하면 코드를 실행한다.(어레이)

dependency에 아무 값도 넣지 않는 경우: 랜더시 딱 한번만 실행

dependency에 아무 값도 없기 때문에, 즉, react.js가 지켜볼 대상이 없기 때문에 코드는 처음 렌더시 딱 한번만 실행된다.
component 안에서 처음 랜더시 딱 한번만 실행하고 싶은 코드가 있는 경우 사용하면 된다.
useEffect(실행할 함수, [])

dependency에 state에 있는 값 하나인 경우: A값 바뀔 때 마다 실행

react.js가 지켜볼 하나의 대상이 있기 때문에 그 데이터가 바뀔 때 마다 코드가 재실행된다.
component 안에서 특정 데이터가 변화할 때만 재실행 하고 싶은 코드가 있는 경우 사용하면 된다.
useEffect(실행할 함수, [특정 state이름])

dependencies에 state에 있는 값이 여러개인 경우: A or B 바뀔 때 마다 실행

react.js가 지켜볼 여러의 대상이 있는 경우로 지켜보는 값 중 하나라도 바뀔 경우 코드가 재실행된다.
A 혹은 B ...가 바뀔 때 재실행 하고 싶은 코드가 있는 경우 사용하면 된다.
useEffect(실행할 함수, [특정 state이름, 특정 state이름])