Props

• props는 객체

• 부모 컴포넌트에서 자식 컴포넌트로 상태나 데이터를 전달할 때 보통 사용

• 컴포넌트의 자체 props를 수정해서는 안 된다.

  • 단방향, 하향식 데이터 흐름 원칙에 위배됨

사용하는 방법

1. 부모 컴포넌트에서 자식 컴포넌트로 전달하고자 하는 값과 속성 정의
   {name: cat}

2. props를 이용하여 정의된 값과 속성 전달
   자식 함수 컴포넌트의 인자에 props 또는 {name} 넣기

3. 전달받은 props 화면에 그리기
   {props.name} 또는 {name}

• App 컴포넌트, Hello의 부모 컴포넌트

function App() {
	return <Hello name="cat" />
}

• Hello 컴포넌트, App 컴포넌트의 자식 컴포넌트

function Hello(props) {
  return <h1>Hello, cute {props.name}</h1>;
}

또는

function Hello({name}) {
  return <h1>Hello, cute {name}</h1>;
}

State

• const [어쩌구, set어쩌구] = useState();

  • 어쩌구 는 상태를 저장하는 변수, set어쩌구 는 상태를 갱신해주는 함수이다.

• state가 변경되면 새롭게 호출되고, 리렌더링 된다.

• 상태를 갱신해주는 함수로 상태를 변경하는 게 아닌, 상태를 저장하는 변수에 값을 할당하여 상태를 변경하려고 시도할 수 있다. 그러면 리렌더링이 되지 않아 상태가 변하지 않는 것처럼 보이거나, 상태가 제대로 변경이 되지 않을 수 있다.

• 만약 여러 개의 컴포넌트에서 같은 상태를 사용해야 한다면, 여러 개의 컴포넌트들의 공통 부모 컴포넌트로 상태를 끌어올리고 상태를 자식컴포넌트에게 내려주어 사용해야 한다.

---

혹시나 잘못된 정보가 있다면 댓글로 알려주세요 ! 저의 성장의 큰 도움이 될 것 같습니다.🌱