[React] 기초 #4 (State & Props)

💡React State & Props

Props

특징

---

• 컴포넌트의 속성(property)을 의미
• 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값으로, 읽기 전용이며 객체의 형태를 가진다.
• 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값으로,
  React 컴포넌트는 JavaScript 함수와 클래스로,
  props를 함수의 전달인자처럼 전달받아 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.
  따라서, 컴포넌트가 최초 렌더링될 때 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용 가능하다.

How to use props

---

1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의

2. props를 이용하여 정의된 값과 속성을 전달

3. 전달받은 props를 렌더링

State

특징

---

• 컴포넌트 내부에서 변할 수 있는 값, 즉 상태는 React state로 다뤄야한다.

State hook, useState

---

1.useState 사용법

1) useState를 이용하기 위해서는 React로부터 useState를 불러와야한다.

import { useState } from "react";

2) 이후 useState를 컴포넌트 안에서 호출한다.

function CheckboxExample() {
  // 새로운 state 변수를 선언하고, 여기서는 이것을 isChecked라 부르겠다.
  const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

• useState를 호출한다는 것은 "state"라는 변수를 선언하는 것과 같으며, 이 변수의 이름은 아무 이름으로 지어도 된다.
• 일반적인 변수는 함수가 끝날 때 사라지지만, state 변수는 React에 의해 함수가 끝나도 사라지지 않는다.
• useState를 호출하면 배열을 반환하는데, 배열의 0번째 요소는 state 변수이고, 1번째 요소는 이 변수를 갱신할 수 있는 함수이다.
• useState의 인자로 넘겨주는 값은 state의 초기값이다.
• state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용한다.

2. state hook 사용 시 주의점

• React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링 된다.
• React state는 상태 변경 함수 호출로 변경해야 하며, 강제로 변경을 시도하는 경우, 리렌더링이 되지 않는다거나, state가 제대로 변경되지 않는다.
  • 예시 : state.push(1), state[1] = 2, state = 'wrong state';