(2023.11.22) (React) Props와 State

1. Props

 

부모 컴포넌트로부터 자식컴포넌트가 물려받는 속성, 다시 말해서 Props를 이용해서 데이터를 전달하는 것을 말합니다.

Props는 자식에서 수정이 불가능합니다. 그 이유는 단방향 데이터 흐름을 지키기 위해서이다.

 

ex)

src/App.js

app.js에서 자식 컴포넌트에게 보낼 속성을 정의합니다. 

# src/App.js

render() {
        return (
            <div className="App">
                <Hello text="React"/> //정의
            </div>
        );
    }
}

 

src/hello.js

hello.js에서 부모컴포넌트에서 받은 props를 호출합니다.

render() {
        return (
        <div>
            <p>
              Hello {this.props.text} //정의 된 props호출
            </p>
        </div>
        );
    }

 

2. State

컴포넌트 내에서 동적으로 변동되는 데이터를 관리할 수 있으며, 기본값을 미리 설정해서 사용이 가능합니다. 

const [num, setNum] = useState(0)

const updateNum = () => setNum(num + 1);
const clearNum = () => setNum(0);
// user초기 값을 설정

 

위와 같은 useState를 사용해서 입력받은 변경된 값을 저장할 때 사용하는 경우가 있습니다.

( useState를 이용해서 회원가입을 하는 것은 다음장에서 해보도록 하겠습니다. )