Hook & Props & State 기초

 

 

 

 

Hook 

: 갈고리

 

 

 

 

클래스 컴포넌트에서만 사용할 수 있었던 상태관리와 라이프 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동해주는 함수

때문에 훅이라는 이름이 붙었고 이런 훅들의 모음을 hooks 라고 한다

 

 

 

 

 

hook 등장 배경

 

리액트 초창기에는 클래스 컴포넌트만 사용했지만 함수 컴포넌트가 선언하기 편하고 직관적이고 메모리 자원을 덜 사용하는 등의 장점이 있어 이를 쓰고자 hook이 등장하게 되었다.

 

 

 

 

 

hook 의 특징

 

함수 컴포넌트에서만 사용 가능하다

이름은 반드시 use- 로 시작한다

내장 hook이 존재한다 (useState, useEffect 등)

직접 만들어 사용할 수 있는데 이를 'custom hook' 이라고 한다

 

 

 

 

hook의 규칙

 

hook은 함수 컴포넌트 내부와 custom hook 내부에서만 호출할 수 있다 ( 일반 Js 에서도 x)

함수 컴포넌트 내의 최상위(함수 컴포넌트의 첫번째, 중괄호 내부) 중괄호 에서만 호출해야 한다.

 

 

 

 

---

 

 

 

 

pros

 

: 컴포넌트의 속성값

-> 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체

-> 전달하고자 하는 어떤 값이든 자식 컴포넌트에 전달 가능

 

 

 

 

 

 

 

 

 

👇 함수형 컴포넌트!

 

 

 

const animal = '호랑이'; 라는 값을 주고 받는 것!

 

 

 

부모 컴포넌트가 데이터를 주는 법

 

부모 컴포넌트가 <Child pet = {animal] /> 방식으로 자식 컴포넌트에 데이터를 넘겨줌

여기서 데이터를 더 추가로 넘기고 싶다면

<Child pet = {animal] englishName="tiger" /> 로 그냥 띄어쓰기 (가독성 때문에) 쓰면 됨

원하는 만큼 추가해서 넘겨줄 수 있음

 

 

 

 

자식 컴포넌트가 데이터를 받는 법

 

const Chlid = (pros) => {

return (<>  </>) }

 

export default Child;

 

 

 

---

 

 

 

State

 

: 컴포넌트 내부에서 가지고 있는 상태값

: 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값

 

 

 

 

 

 

💡 그렇다면 state 값을 직접 주는 건 어떨까? 14번 줄 setColor 대신 color 를 주는 것!

 

하지만 이는 console.log(color) 로 직접 찍어보면 blue라 나오지만 구현되는 화면엔 변화가 없다.

 

-> setColor로 업데이트와 함께 화면을 다시 그려주는 리렌더링이 안 되었기 때문!

-> 화면에 변화를 주고 싶을 땐 꼭 setState를 이용해서 state 값을 업데이트 해주어야 한다.