00

Props
컴포넌트에 원하는 값을 넘겨주기 위해서 사용한다.
함수를 전달할 수 있다.
값을 변경할 수 없다.

01

Props

부모 컴포넌트에서 자식 컴포넌트로만 전달이 가능하다.
Props가 변경되면 컴포넌트가 다시 렌더링 된다.
모든 자바스크립트 표현을 전달할 수 있다.

부모 컴포넌트로부터 전달받은 Props를 임의로 재할당해서 사용할 경우 컴포넌트를 렌더링할 때 문제가 발생할 수 있다.

DOM Attribute

기본적인 DOM Element(div, span 등)들의 Attribute는 camel case로 작성한다.
input element의 기본값은 defaultValue, defaultChecked로 설정합니다.

State

state가 값 하나일때

import React, {useState} from 'react';

function App() {
    const [count, setCount] = useState(0);
  return (
    <div className="App">
    <span>{count}회 클릭하였습니다.</span>
    <button onClick={() => {setCount(count => count+1)}}>증가</button>
    </div>
  );
}

export default App;

state가 객체일때

import React, {useState} from 'react';

function App() {
    const [person, setPerson] = useState({
    name: "김민수",
    count: 0
});
  return (
    <div className="App">
    <button onClick={() => {
        setPerson(person => {
            const newPerson = {...person};
            newPerson.count += 1;
            return newPerson;
        });
    }}></button>
    <span>{person.name}님이 버튼을 {person.count}회 클릭하였습니다.</span>
    </div>
  );
}

export default App;

• State 값이 변경되면 자동으로 컴포넌트가 재 렌더링 된다.
• object 혹은 array 내의 일부 값만 바꿀 경우 실제 object나 array의 변경이 일어나는 것이 아니기 때문에 React에서 State 값의 변경으로 인식하지 않아 재 렌더링 명령이 호출되지 않는다.

02

이벤트와 State 연동

import React, {useState} from 'react';


function App() {
const [inputValue, setInputValue] = useState("");
  return (
    <div className="App">
        <input onChange={(evt) => {
            setInputValue(evt.target.value);
        }} />
        <span>{inputValue}</span>
    </div>
  );
}

export default App;

이벤트 자체를 컴포넌트로 전달하기

<MyForm onChange={(evt) => {
        setUsername(evt.target.value);
    }}/>

function MyForm(props) {
    return <input onChange={props.onChange} />
}