[React] props,state

gimmari·2024년 8월 11일

📝 React

목록 보기

2/24

01. Props

props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향).

props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

import React from "react";

function Child(props) {
  return <div>{props.motherName}</div>;
}

function Mother() {
  const name = "홍부인";
  return <Child motherName={name} />;
}

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

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

export default App;

props는 object literal(={key: “value”} 데이터) 형태이기 때문에 {props.motherName} 로 꺼내서 사용할 수 있습니다.
object literal의 key가 motherName 인 이유는 우리가 Child로 보내줄 때 motherName={name} 으로 보내주었기 때문.

01-1. Props 중 Children

import React from "react";

function User(props) {
  return <div>{props.children}</div>;
}//부모 컴포넌트

function App() {
  return <User>안녕하세요</User>;
}//자식 컴포넌트
export default App;

=> User 컴포넌트에서 props.children을 받아 그대로 렌더링 해준 모습

01-2. 구조 분해 할당

function Todo(props){
	return <div>{props.todo}</div>
}
//구조분해할당 적용시

function Todo({ title }){
	return <div>{title}</div>
}

01-3. default arguments

부모 컴포넌트에서 자식 컴포넌트로 정보를 전달할 때 사용합니다. 때때로, 특정 props가 부모 컴포넌트로부터 전달되지 않을 수도 있는데, 이 경우 자식 컴포넌트에서 해당 props의 기본값을 설정해 줄 필요가 있습니다. 이를 위해 리액트에서는 "default arguments" 방식을 활용할 수 있습니다.

function Welcome({ name = "Guest" }) {
    return <h1>Welcome, {name}!</h1>;
}

위 코드에서 name = "Guest"는 name prop이 전달되지 않았을 때 "Guest"라는 기본값을 사용하도록 설정

02. State

State란 컴포넌트 내부에서 바뀔 수 있는 값.
UI(엘리먼트)로의 반영을 위해 바뀜.
State를 만들 때는 useState()를 사용한다.

const [ value, setValue ] = useState( 초기값 );

02-1. state 변경하기

state를 변경할때는 setValue(바꾸고 싶은 값) 를 사용한다.

✔︎ setName(”박할아”) 를 하면 이름 "김할아"에서 "박할아"로 바뀔 것

// src/App.js

import React, { useState } from "react";

function Child(props) {
  return (
    <div>
      <button
        onClick={() => {
					props.setName("박할아"); // 드디어 받은 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;

하지만 이렇게 바뀐 값은 브라우저를 새로고침하면 다시 초기값으로 바뀝니다. setName을 통해서 바꾼 값은 어디에 저장되는 것이 아니기 때문에 단순히 화면에서만 바뀐 값으로 다시 렌더링이 되는 것입니다.

02-2. useState + onClick event

이벤트 핸들러를 만들어주고 그 안에 setName 을 넣어줍니다.

이제 우리가 버튼을 누르면 setName()안에 있는 값이 “누렁이”니까, state가 “길동이" => “누렁이”로 바뀐다.

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("길동이");

  function onClickHandler() {
    setName("누렁이");
  }

  return (
    <div>
      {name}
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

02-3. useState + onChange event

버튼과 자주 사용하는 input 에서는 보통 사용자가 입력한 값을 state로 관리하는 패턴을 많이 사용.

input과 useState를 사용해서 input의 값을 넣을 value라는 state를 생성 =>

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  return (
    <div>
      <input type="text" />
    </div>
  );
};

export default App;

✔︎ 이벤트 핸들러를 구현하고 state와 연결하기

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  const onChangeHandler = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue);
  };

  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={value} />
    </div>
  );
};

export default App;

이제 각 객체를 꺼내 사용할 수 있음!

02-4. 불변성

불변성을 유지하는 방법(Immutable way):

let numbers = [1, 2, 3];
let newNumbers = [...numbers, 4]; // 새 배열을 생성하여 기존 배열을 변경하지 않음
console.log(numbers); // [1, 2, 3]
console.log(newNumbers); // [1, 2, 3, 4]

리액트에서 유지 🔽

import React, { useState } from "react";

function App() {
  const [dogs, setDogs] = useState(["말티즈"]);

  function onClickHandler() {
		// spread operator(전개 연산자)를 이용해서 dogs를 복사합니다. 
	  // 그리고 나서 항목을 추가합니다.
    setDogs([...dogs, "시고르자브르종"]);
  }

  console.log(dogs);
  return (
    <div>
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;