[React] React useState(), useEffect();

 

Hook은 React 버전 16.8부터 새로 추가되었습니다:)

 

1. useState();

함수 컴포넌트를 사용하던 중  state를 추가하고 싶을때 클래스 컴포넌트를 사용하는 번거로움이 있었을 텐데, 이제는 함수 컴포넌트 안에서 Hook을 이용하여 State를 사용하게 해줍니다.

 

클래스 컴포넌트를 사용할때

클릭하면 숫자가 +1씩 올라갑니다:)

 

 

useState(); 를 사용할 때

클릭하면 숫자가 +1씩 올라갑니다:)

 

const [state변수, 해당 변수를 수정할 수 있는 함수] = useState(state의 초깃값);

 

useState는 value, modifyFunction 요소를 가집니다.

2가지 요소 전부 다 아무이름이나 쓰셔도 상관없습니다!

클래스 컴포넌트의 this.state.count, this.setState와 유사합니다.

 

인자로 초깃값을 넘겨줍니다. 숫자, (), (" ") 등등을 선언 할 수 있습니다.

2개의 다른 변수를 저장하기를 원한다면 useState()를 두 번 호출해야 합니다.

 

 

 

2. useEffect()

컴포넌트가 랜더링 될 때 특정 작업을 실행할 수 있도록 해주는 함수입니다.

 

 

기본형태

useEffect(function, deps)

• function : 실행하고자하는 함수
• deps : []형태로, 빈배열이나 특정값을 넣을수 있습니다:)

deps에 특정 값을 넣게된다면, 처음 마운트 될 때 그리고 그 값이 바뀔 때, 언마운트 될 때, 값이 바뀌기 직전에 모두 호출이 됩니다.

 

 

1) 처음 랜더링 될 때

 

처음 랜더링 될 때 딱 한번만 실행되게 하고싶다면 [] 빈 배열을 넣어줍니다

만약에 배열이 없다면, 리랜더링 될 때마다 실행됩니다.

 

 

2) 특정값이 바뀔 때 

 

특정값이 업데이트 될 때 마다 실행하고 싶을때는 deps의 배열안에 검사하고 싶은 값을 넣어줍니다.

 

 

3) 컴포넌트가 사라지기 직전이거나 사라질 때

 

return 뒤에나오는 게 cleanup 함수입니다.

언마운트될 때만 실행시키고 싶다면 빈배열을 넣고,

특정값이 업데이트되기 직전에 실행하고싶다면 특정값을 넣어줍니다.