Props/State

1. Props

데이터를 다룰때 사용하며, 부모컴포넌트가 자식컴포넌트한테 값을 전달할때 사용하며 읽기전용이다.
컴포넌트 자체에서 Props를 수정하면 안되며, 순수 함수처럼 동작해야한다.

// MyName.js
 
const MyName = ({ name }) => {
  return <div>나는 {name}입니다</div>;
};
 
MyName.defaultProps = {
  name: "기본이름",
};
 
export default MyName;
 
 
// App.js
 
const App = () => (
    <div>
        <MyName name="경아" />
     </div>
)

2. State

• useState는 컴포넌트 내 동적인 데이터를 관리할 수 있는 Hook이다.
• 컴포넌트 내부에서 바뀔 수 있는값
• 값을 변경시 setState라는 함수를 사용
• state가 변경되면 자동으로 컴포넌트가 재렌더링된다.

  함수 컴포넌트에서는 useState Hook(훅)을 사용해야한다.
  const [상태값 저장 변수, 상태값 갱신 함수] = useState(상태초기 값);

import React, { useState } from 'react'; 
 
function Counter() { 
    const [number, setNumber] = useState(0); 
 
    const handleIncrease = () => {
        setNumber(number + 1);
    }
 
    const handleDecrease = () => {
        setNumber(number + 1);
    }
 
    return (
      <div>
        <h1>카운터</h1>
        <div>값 : {number}</div>
        <button onClick={handleIncrease}>+</button>
        <button onClick={handleDecrease}>-</button>
      </div>
    );
}
 
export default Counter;

• setState로 객체 안의 내용을 변경할경우

  기존 user의 내용을 새로운 object에 담고 변경한다.

const [user, setUser] = useState({name: '민수', grade: 1 })
 
setUser((current) => {
    const newUser = { ...current }
    newUser.grade = 2
    return newUser
})

3. setState 사용방법

1. State를 변경할 값을 직접 입력
   setTitle("Hello")
   
2. 또는 현재 값을 매개변수로 받는 함수 선언
   // return 값이 state에 반영됨
   setTitle((current) => {
       return current + "World";
   })