React Props & State

Hook이란?

클래스 컴포넌트에서만 사용할 수 있었던 state(상태) 관리와 lifecycle(라이프 사이클) 관리 기능을 함수 컴포넌트에서도 사용할 수 있도록 연동(hook in)해주는 함수 ex) useState, useEffect ..

규칙

• 함수 컴포넌트 내에서 호출
  Hook은 클래스 컴포넌트 안에서는 동작하지 않으며 오로지 함수 컴포넌트 내에서만 사용해야 한다.
• 최상위에서 호출
  해당 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 여러 개의 Hook이 호출되는 것을 보장할 수 있다.
  또한 반복문, 조건문, 중첩된 함수 내에서는 Hook을 호출하면 안 된다.

Props란?

props란 컴포넌트의 속성값, 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체

사용법

• 부모 컴포넌트에서의 데이터 전달
  tag에 속성을 주입하듯 자식 컴포넌트에 속성 값을 추가해 전달한다.
• 자식 컴포넌트에서의 전달 받은 데이터 적용
  부모 컴포넌트가 전달해 준 props는 하나의 객체로 합쳐져서 함수 컴포넌트에 전달되고, props라는 이름으로 부모 컴포넌트가 전달해 준 값을 받아 사용하면 된다. ex)props.pet, props[”englishName”] 등..
• 함수 전달과 적용
  위 방법과 같이 전달 받은 객체 속의 함수를 받아 사용하면 된다.
  ex)

  <button onClick={props.test}>클릭</button>

State란?

컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값을 의미하며, 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값이다.

State 선언

useState 함수를 import한 후에 사용해야 한다. useState 함수는 Hook의 일종으로 내장되어 있는 react로부터 가져올 수 있다.

• const [state, setState function] = useState(defaultValue)
• 첫 번째 요소(state)는 우리가 동적으로 관리하고자 하는 상태값입니다. 해당 상태의 초기값은 useState hook을 호출할 때 인자(defaultValue)로 넘겨줍니다.
• 두 번째 요소(setState function)는 첫 번째 요소인 상태값을 업데이트 하는 함수입니다. state를 초기값에서 다른 값으로 변경하고 싶다면 setState를 통해서 변경해 주면 됩니다.

State 적용

defaultValue 있는 값은 변수명 state으로 사용 할 수 있다.
또한 setState function을 이용하여 상태값을 변경하면 할당 받은 state는 setState function함수로 바뀐 상태로 업데이트 된다.

---

과제 중 궁굼한 점 : useState를 사용해서 state의 값을 업데이트 후 바로 console.log를 찍어보면 값이 바뀌지 않고 한 박자 느리게, 즉시 반영되지 않는다. 그 이유는 useState는 비동기 처리로 반영 되기 때문에 값은 변해도 리렌더링을 통해 값을 다시 불러와야 한다고 한다. 따라서 이러한 경우 useefect를 사용하면 된다.