React Hook

State 선언하기 useState()

클래스 컴포넌트에서 사용하던 state를 함수형 컴포넌트에서 사용할 수 있게 해주는 훅이다.

const [stateName, setStateName] = React.useState('default')

함수형 컴포넌트에서 useState를 이용하면 두가지를 반환한다.
첫번째 요소로는 state가 반환된다. 초기값은 매개변수로 제공한 값이다.

const [name, setName] = React.useState('hajun')
//name이라는 state 생성, 초기값은 'hajun'
console.log(name)	// 결과 : 'hajun'

두번째 요소로는 state를 수정할 수 있는 setter함수 setState가 반환된다.

const [name, setName] = React.useState('hajun')
console.log(name)	// 결과 : 'hajun'
setName('Peter')	//함께 반환된 name이라는 state를 수정
console.log(name)	// 결과 : 'Peter'

💭 왜 name의 값을 직접 바꾸지 않나요?

let [name, setName] = React.useState('hajun')
name = 'Peter'
console.log(name)	// 결과 : 'Peter'

❌ name을 직접 바꾸는 행위는 state 변경의 특징인 리랜더링을 발생시키지 않습니다.
✅ state로서 사용이 필요하면 함께 제공되는 setter함수를 사용해야합니다.

---

💖만들어진 state 뿐만 아니라 setter함수또한 자식 컴포넌트로 전달하여 사용 가능합니다.

let [name, setName] = React.useState('hajun')
return (
  <Feed name={name} setName={setName}/>
)

LifeCycle 해결사 useEffect()

클래스 컴포넌트에서 사용하던 LifeCycle을 함수형 컴포넌트에서 사용할 수 있게 해주는 훅이다.

useEffect(() => {
//0. componentDidMount + componentDidUpdate내용
	return () => {
  	//componentWillUnmount내용
}
})

함수형 컴포넌트에서 useEffect를 이용하면 LifeCycle을 어느정도 구현 가능하다.

0.을 보면 마운팅과 업데이트 모두 포함한다.
렌더링 이후에 발생하는 것으로 생각하면 된다. 이미 DOM이 업데이트 된 후에 실행된다.

function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
    //최초 마운트와 업데이트 이후(count 계산 이후) 작동
    //이 예시는 setter 함수에 의해 리랜더링 되어 작동
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

💖두번째 배열 인수를 사용하여 Effect를 건너뛰게 할 수 있습니다.
다음 랜더링 시 두번째 인수에 변화가 없다면 Effect가 실행되지 않습니다.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // count가 바뀔 때만 effect를 재실행합니다.

• 이때 배열 내에 여러 개의 값을 넣을 수도 있습니다.
  그중의 단 하나만 다를지라도 React는 effect를 재실행합니다.

개념정리 양식

배우게 된 Hook

배우게 된 메서드 또는 방식의 예시를 간략히 적었습니다.

💖참고하면 좋을만한 장점과 예시를 간략히 적었습니다.

💡 참고하면 좋을만한 변화형들과 예시를 간략히 적었습니다.

✅응용하면 좋을만한 사용방법과 예시를 간략히 적었습니다.

❌오류와 해결에 사용 한 해결방법을 간략히 적었습니다