[React] Front-End

[FE] React / ReactHooks

ddgoori 2021. 5. 17. 13:30

RSI

 

함수로는 React.createRef();

 

ref로 사용할 수 있음

 

react의 메모가 있음.

메모라는 함수 안에 function 컴포넌트를 전달해주면.

PureComponent처럼 작동한다. 

 

reactHook에서 state를 쓴다는 것은 useAPI를 쓰면 된다. 

변수를 선언하면서 두가지로 선언해야한다. => useState

 

const [count, setCount] = useState(0); 

변수 선언할 때 위로 

 

실제의 스테이트 값과. 함수를 업데이트할 수 있는 setCount를 호출함.

useState

-> 클래스는 한번만들어지면 딱한번만 만들어지는데. 렌더함수만 반복해서 호출됨

-> 한 번 만들어진 멤버변수는 한번만 할당됨.

 

근데 function 함수는!

클래스가 아니라 함수라서. 컴포넌트가 변경되면 코드블럭 전체가 반복해서 계속 호출된다.

 

지역변수들도 그래서 무한정 반복이 된다. 

함수가 호풀이 되면 새로운 오브젝트가 만들어지고.

=> useState 리액트 훅에서 제공하는거. useState를 쓰면 리액트가 알아서 기억하고있다.

컴포넌트에 연결된 state는 ...

 

(클래스의 경우) React.createRef(); 

(함수의 경우) useRef(); <- 한번만 만들고 메모리에 저장해놓고 계속 사용함.

 


 

useCallback() <- 나중에 실전 프로젝트 하면서 사용.

 

Hooks을 어떻게 쓸 수 있는지.

 

 

useEffect() -> 컴포넌트가 마운트가 되었을 때. 업데이트가 될 때마다 호출됨

=>