props, state

props란?
컴포넌트끼리의 정보교환 방식이다.
props는 반드시 위에서 아래 방향(부모->자식)
props는 반드시 읽기 전용으로 취급하며 변경하지 않는다

태그 사이의 내용을 보여주는 children

return <Mycomponent>리액트</Mycomponent>;

가 있으면 저 태그 사이의 '리액트' 문자열을 보여주려면 props.children으로 접근해야한다.

구조분해할당을 통해 props 내부값 추출하기

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

props를 사용하는 모든 곳에 props.을 붙여줘야했다
이것을 구조분해할당으로 짧게 바꿀 수 있다.

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

여러개의 props를 받는다면, {}안에 여러개의 props를 그대로 써주면 된다.

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

State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

왜? UI로의 반영을 위해서! 바뀌어야 하니까!

State만들 때는 useState()사용한다.

import React, { useState } from 'react';

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

// .. 중략 

useState는 state를 만들어주는 리액트에서 제공하는 기능(hook)
const [name, setName] = useState("김할아");

setName: 변경하는 값
useState("김할아"): 초기값은 김할아
named이라는 state를 만들고 name state의 처음값은 김할아로 정한것임. 언제든 변할 수 있는 값이기 때문에 처음값이라는 개념이 존재

const [ value, setValue ] = useState( 초기값 );
value: 이 state의 이름
setValue: 변경되는 값

불변성 & 순수함수
불변성: 메모리에 있는 값을 변경할 수 없는 것
원시데이터는 불변성이 있다
: 원시데이터를 수정하면 새로운 주소에 저장된다(새로운 주소를 가리킨다.)
원시데이터를 제외한 데이터는 불변성이 없다(객체,배열등등)
:객체는 주소값을 바라보고있다. 객체를 수정하게 되면 바라보는 주소값은 변하지 않고 그 객체의 값만 수정된다.(그냥 수정이된다는소리)

리액트는 리렌더링 시 state 변화를 확인한다. state가 변하지 않았다면 렌더링을 하지않는다.
state가 변했는지 안변했는지 어캐아냐
메모리 주소를 비교한다. 그래서 원시데이터가 아닌 데이터(객체, 배열 등)을 수정하면 값은 바뀌지만 메모리주소가 바뀌지 않기 때문에 리액트는 state가 변했다고 인지하지 못하기 때문에 렌더링이 일어나지 않는다.

해결방법?

불변성을 지키기 위해(렌더링이 일어날수있게) 직접 수정하는 것이 아니라 전개 연산자로 기존의 값을 복사하고 값을 수정하는 방식으로 구현!

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;