리액트 공부 2일차

props

부모 컴포넌트의 데이터를 자식 컴포넌트로 넘겨 줄 때 사용한다

// file App.js
...
const App = () => {
	const name = "React";
    return <MyComponent name={name}>FE</MyComponent>;
}
...

// file MyComponent.js
...
const MyComponent = props => {
	return (
    <div>
      안녕하세요, 제 이름은 {props.name}입니다. <br />
      children 값은 {props.children}입니다. // 태그 사이의 내용은 children에 담김
    </div>
  );
};

MyComponent.defaultProps = { // App(부모 컴포넌트)에서 name 속성을 주지 않은 경우 props.name의 값을 기본 값으로 설정
  name: '기본 이름'
};
...

state

컴포넌트 내부에서 바뀔 수 있는 값을 state 라고 부른다.

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
      <h1>{number}</h1>
      <button
        onClick={() => {
          setNumber(number + 1);
        }}
      >
        증가
      </button>
      <button
        onClick={() => {
          setNumber(number - 1);
        }}
      >
        감소
      </button>
    </div>
  );
};  	

state인 number의 값을 변경하고 싶을 때는 setNumber의 argument에 변경할 값을 넣어주면 된다.

state 사용할 때 주의 사항

// 배열 state를 변경하고 싶은 경우
const [fruits, setFruits] = useState(['apple', 'banana', 'orange']);
...
const modifyFruits = [...fruits];
modifyFruits[2] = 'mellon';
modifyFruits.push('strawberry');
setFruits(modifyFruits);
...

// 객체 state를 변경하고 싶은 경우
const [message, setMessage] = useState(sendBy: 'Tom', sendTo: 'Bob', message: 'Hello')
...
const modifyMessage = { ...message, message: 'Bye Bye' };
setMessage(modifyMessage);
...