React (2)

• state

  • 컴포넌트 내부에서 바뀔 수 있는 값

  • UI(element)로 반영

    • state를 만들 때는 useState()를 사용한다.
    • useState는 react에만 존재하는 개념이자 기능, hook 이라고 표현한다.

• 예시코드 )

import React, { useState } from 'react';

function GrandFather() {
  const [name, setName] = useState("김춘배"); // => state 사용
  return <Mother grandFatherName={name} />;
}

const [ value, setValue ] = useState( 초기값 );
: 배열의 구조분해 할당이 사용됐다.
const로 선언, [] 빈 배열을 생성, 배열의 첫 번째 자리에는 state의 이름, 두 번째 자리엔 set을 붙이고 state 이름을 붙여준다.
useState() 괄호 안 인자엔 state의 원하는 처음값을 넣어주면 된다.

이해가 정말 안 갔던 부분이고 프로젝트를 하면서 조금 이해를 했던 부분이라 얼마나 이해했냐라고 말하면 작동 원리 정도만 알아 공부가 더 필요하다.

여기서 처음값 또는 초기값이라고 하는건 initial state라고 하고 언제든 변할 수 있는 값이기도 한다.

function Child(props) {
  return (
    <div>
      <button onClick={() => {
  setName()을 실행할 예정}>이름 바꾸기</button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

=>

// useState에 대한 import
import React, { useState } from "react";

function Child(props) {
  return (
    <div>
      <button
        onClick={() => { 
    // 받은 setName을 실행합니다.
	props.setName("김노인");
        }}
      >
        할아버지 이름 바꾸기
      </button>
      <div>{props.grandFatherName}</div>
    </div>
  );
}

function Mother(props) {
  return (
    <Child grandFatherName={props.grandFatherName} setName=
    // 받아서 다시 준다
    {props.setName} /> 
  );
}

function GrandFather() {
  const [name, setName] = useState("김노인");
  return <Mother grandFatherName={name} setName={setName} />; // 준다
}

function App() {
  return <GrandFather />;
}

export default App;

역시 낯선 것은 봐도 봐도 잘 모르는게 맞다..
계속 들여다 보는 게 정답인가 싶다.