[React] State & Props 정리🧹

✔️ State

state는 하나의 컴포넌트 안에서만 사용할 수 있는
독립적인 상태이기 때문에 전역으로 사용할 수 없다.

❗️참고) useState의 전달인자는 하나만 전달할 수 있습니다.

---

🧽 기본 구조

// 기본 구조
const [state, setState] = useState(초기값);

// 위 코드를 풀어 쓰면 아래와 같다.
const state = React.useState(초기값);
console.log(state[0]) // 초기값
console.log(state[1]) // setState(원하는값)

---

🧽 주의점

1️⃣ 직접 state를 수정하면 안된다.

const [state, setState] = useState("");
state = "TATA"
//❗️이렇게 사용하면 안 됨❗️

2️⃣ state는 비동기적일 수 있다.

const [cnt, setCnt] = useState(0);

setCnt(cnt + 1);
setCnt(cnt + 1);
setCnt(cnt + 1);
// 1이 나올 수도, 2나 3이 나올 수도 있음.

// 아래처럼 함수 인자로 사용하면 해결 가능.
setCnt((cnt) => cnt + 1);
setCnt((cnt) => cnt + 1);
setCnt((cnt) => cnt + 1);
// 3이 출력

---

🧽 예시

1️⃣ input

function NameForm() {
  const [name, setName] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  }
  
  const handleClick = () => {
    alert(name);
  };

  return (
    <div>
      <input type="text" value={name} onChange={handleChange}></input>
      <button onClick={handleClick}>Button</button>
      <h1>{name}</h1>
    </div>
  );
};

2️⃣ select

function SelectExample() {
  const [choice, setChoice] = useState("apple");

  const fruits = ["apple", "orange", "pineapple", "strawberry", "grape"];
  const options = fruits.map((fruit) => {
    return <option value={fruit}>{fruit}</option>;
  });
  const handleFruit = (event) => {
    setChoice(event.target.value)
  };

  return (
    <div className="App">
      <select onChange={handleFruit}>{options}</select>
      <h3>You choose {choice}</h3>
    </div>
  );
}

---

✔️ Props

props란 부모 컴포넌트가 자식 컴포넌트에게
전달해주는 데이터 property(객체, 키-값)이다.

🧽 기본 구조

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
      <Child text={"I'm the second child"} />
    </div>
  );
}

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

---

🧽 props.children

여는 태그와 닫는 태그의 사이에 value를 넣어 props.children로 전달하는 방법이다.

function Parent() {
  return (
    <div className="parent">
        <h1>I'm the parent</h1>
        <Child>I'm the eldest child</Child>
    </div>
  );
};

function Child(props) {
  return (
    <div className="child">
        <p>{props.children}</p>
    </div>
  );
};

---

🧽 구조분해할당

const Child = (props) => <span>{props.text}</span>

// 위 코드를 구조분해할당하면 아래와 같다.
const Child = ({ text }) => <span>{text}</span>

---

🧽 style 넣는 방법

const Child = (props) => <span style={props.style}>{props.text}</span>

// 카멜케이스로 써야 한다.
<Child text={"TATA"} style={{ fontSize: '16px'}}/>

---

🧽 스프레드 활용 예시

const Hello = (props) => <div>{props.name}</div>

function Say() {
  const props = {
    name: "walli"
  };
  return <Hello {...props} />;
}

---

🧽 주의점

1️⃣ props는 읽기 전용이다.

함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정하면 안된다.
모든 React컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

// 순수 함수이다.
function add(a, b){
    return a + b;
}

// 아래는 순수 함수가 아니다.
function add(a, b){
    return a += b;
}

---

🔥State vs Props

▷ State
컴포넌트의 상태를 나타낸다.
컴포넌트 내부에서 선언되고, 직접 변경 가능하다.(외부에 공개 안함)
❓State는 언제 사용하나요?
컴포넌트의 상태값을 나타내기 위한 것들
(ex. 체크박스의 체크 값, 리스트 값, 텍스트박스 안의 텍스트 등등)

▷ Props
읽기 전용이기에 State처럼 변할 수 없다.
상속받은 컴포넌트 내에서 수정이 불가능하다.