22020926 React Hooks - useState, useEffect

Hook은 class를 작성하지 않고도 state등 다른 React의 기능들을 사용할 수 있도록 한다.

Hook의 규칙

• React 함수 구성 요소 내에서만 호출할 수 있음(반드시 Functional Component 안에서 사용해야 함)
• 구성 요소의 최상위에서만 호출할 수 있음
• 조건문, 반복문 안에서 못 씀

useState

State: 컴포넌트의 상태

//State 사용하기
const [state, setState] = useState(initialState);



//콜백으로 초깃값 지정하기
//초깃값을 계산하는 코드가 복잡한 경우에 활용
const [state, setState] = useState(() => {
  // ...
  return initialState;
});



//State 변경
setState(nextState);



//이전 State를 참조해서 State 변경
//비동기 함수에서 최신 State 값을 가져와서 새로운 State 값을 만들 때
setState((prevState) => {
  // ...
  return nextState
});

 

 

 const [state, setState] = useState(초기값);
 // state 생성과 동시에 가져야될 초기 값을 ()에 인자로 넣어 줌
 // state 현재 상태 값
 // state 값을 변경 시켜 주고 싶을때 setState을 사용
 
  
 const 초기값 = () => {
   return ['초기값1' , 초기값2]};
   
  const [state, setState] = useState(()=> {
     retutn 초기값();
     });
 //초기값을 불러 가져올때 무거운 작업을 해야 된다면 콜백으로!
 //콜백으로 불러주면 맨처음 화면에 렌더링 될때만 불려지게 됨
 
 
 //state를 변경할 때 새로변경 될 스테이트 값이 이전 스테이트 값과 연관이 되어있다면
 setState((prevState) => {
    //setState의 인자로 리턴하는 콜백함수
   return newState;  
 });

 

 

 

useEffect

Mount 화면에 첫 렌더링 / Update 다시 렌더링 / Unmount 화면에서 사라질때

특정 작업을 처리할 코드를 실행시켜 주고 싶다면 사용

컴포넌트 함수에서 사이드 이펙트(리액트 외부의 값이나 상태를 변경할 때)에 활용하는 함수

//처음 렌더링 후에 한 번만 실행
useEffect(() => {
  // ...
}, []);



//렌더링 후에 특정 값이 바뀌었으면 실행
//참고로 처음 렌더링 후에도 한 번 실행됨
useEffect(() => {
  // ...
}, [dep1, dep2, dep3, ...]);



//사이드 이펙트 정리(Cleanup)하기
useEffect(() => {
  // 사이드 이펙트

  return () => {
    // 정리
  }
}, [dep1, dep2, dep3, ...]);

 

 

 

// 기본적으로 콜백

useEffect(() => {작업코드})
//하나의 콜백함수만 받음
// 렌더링 될때 마다 실행

useEffect(() => {},[value])
//화면에 첫 렌더링 될때 실행
//value 값이 바뀔 때 실행

useEffect(() => {},[])
//빈배열은 화면에 첫 렌더링 될때만 실행

 

 

 

참고 및 출처

https://ko.reactjs.org/docs/hooks-reference.html

Hooks API Reference – React

https://www.w3schools.com/react/react_hooks.asp

React Hooks