[React] React Hook

✔️ React의 Component는 클래스형과 함수형으로 구성

기존의 클래스형 컴포넌트에서는 몇 가지 어려움이 존재

1. 상태(State) 로직 재사용 어려움
2. 코드가 복잡해짐
3. 관련 없는 로직들이 함께 섞여있어 이해가 힘듦
   ➡️ 이와 같은 어려움 해결하기 위해 Hook 도입

📌 Hook

함수형 컴포넌트에서 State와 Lifecycle 기능을 연동해주는 함수
❗️클래스형에서는 동작하지 않음

useState

• 기본적인 Hook으로 상태관리를 해야할 때 사용
• 상태를 변경할 때는 set으로 준 이름의 함수 호출
• 초기값은 첫 렌더링 때 한 번 사용
• state는 객체일 필요 없이 문자열, 숫자, boolean, 배열, null, 객체 등 값 넣을 수 있음

const [posts, setPosts] = useState([]); // 비구조화 할당 문법

➡️ useState([])와 같이 () 안에 초기화 설정 가능(예제는 빈 배열 생성 상태)

useEffect

• 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook

useEffect(() => {
    console.log("렌더링 완료");
    console.log(posts); // posts가 변경되어 리턴되면 useEffect 실행
});

➡️ 클래스 컴포넌트의 componentDidMount()와 componentDidUpdate()의 역할 동시에 한다고 봐도 됨

[참고 자료]

🔗링크
🔗링크