[React] React Props

Props

React가 컴포넌트로 작성한 Element를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는 것을 Properties의 줄임말 props라고 한다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체이다.

 

const Welcome = (props) => {
	return (
    	<h1>hello, {props.name} </h1>
    )
}

ReactDOM.render (
	<Welcome name= "kim SangDeok" />,
    document.getElementById('root')
)

위와 같은 예시 코드는 " hello, Kim SangDeok "을 렌더링을 하는 예시 코드다. 코드를 실행하면 일어나는 일은

1. <Welcome name= "Kim SangDeok" /> Element로 ReactDOM.render()를 호출한다.
2. React는 {name: "Kim SangDeok"}을 props해서 Welcome 컴포넌트를 호출한다.
3. Welcome 컴포넌트는 결과적으로 <h1>hello, Kim SangDeok</h1> Element를 반환한다.
4. ReactDOM은 <h1>hello, Kim SangDeok</h1> Element와 일치하도록 DOM을 효율적으로 업데이트한다.

Props 특징

Props는 읽기 전용이다. 이전에는 serProps, replaceProps로 props를 변경할 수 있었지만, 이제는 더 이상 사용되지 않는다. 따라서, 함수 컴포넌트나 클래스 컴포넌트  이 둘의 컴포넌트의 자체 props를 수정해서는 안된다. 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

 

Props와 State의 차이

props와 State는 일반 JavaScript 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있다. props는 함수 매개변수처럼 컴포넌트에 전달되는 반면 State는 함수 내부에 선언된 변수처럼 컴포넌트 안에서 관리된다.

• props와 state 둘 다 JavaScript 객체이다.
• props와 state 모두 변경 시 render를 trigger한다.
• 구성요소가 동일한 props 및 state 조합에 대해 다른 출력을 하는 경우 잘못된 작업을 수행하고 있는 것이다.

 

출처: https://itprogramming119.tistory.com/645