React입문 Props/State/불변성

1. Props

(1) props란

• 컴포넌트 끼리의 정보교환방식!
• props는 반드시 위에서 아래방향으로! 부모->자식 (단방향)
• props는 읽기전용 취급. 변경x

import React from "react";

// div안에서 { } 를 쓰고 props.motherName을 넣어보세요.
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;

(2) childern

• 자식 컴포넌트로 정보를 전달하는 또 다른 방법!

import React from "react";

function User(props) {
  return <div>{props.children}</div>;
}

function App() {
  return <User>안녕하세요</User>;
}
export default App;

• Layout컴포넌트를 만들 때 자주 사용!

(3) 구조분해할당과 Props
지금까지는

function Todo(props){
	return <div>{props.todo}</div>
}

구조분해할당을 이용 (props는 object literal형태의 데이터)

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

여러개의 props를 받는다면?

function Todo({ title, body, isDone, id }){
	return <div>{title}</div>
}

2. State

(1) state란?

• 컴포넌트 내부에서 바뀔 수 있는 값! (UI)로의 반영을 위해..
• state를 만들 때는 useState()를 사용

import React, { useState } from 'react';

function GrandFather() {
  const [name, setName] = useState("김할아"); // 이것이 state!
  return <Mother grandFatherName={name} />;
}

// .. 중략 

(2) 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;

(3) useState + onChange Event

import React, { useState } from "react";

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

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

	console.log(value) // value가 어떻게 변하는지 한번 콘솔로 볼까요?

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

export default App;

3. 불변성

(1) 리액트에서 원시데이터가 아닌 데이터의 불변성을 지켜주는 것을 중요시하는 이유
리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 않고, 직접 수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없게 됨.
=> 개발자가 값은 바꿨지만 리액트는 state가 변했다고 인지하지 못함 => 리렌더링 일어나지 않음

(2) 리액트 불변성 지키기 예시
배열의 setState할 때 불변성을 지켜주기 위해 직접 수정하지 않고 전개 연산자를 사용해 기존의 값을 복사하고, 그 이후에 값을 수정함

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;