No.9 Props

Props

props는 properties(= 속성)의 축약어이다. 컴포넌트의 속성값을 나타내며, 부모 컴포넌트로부터 전달 받은 데이터를 지니고있다. props, state 둘 다 객체이기 때문에 {key: value}로 구분해주어야한다. 예를들어 Parent 컴포넌트에서 Hello 컴포넌트를 사용 할 때 name을 전달 해주고 싶다면 아래와 같이 넣으면된다.

//Parent.js
//import, export는 생략했다.

class Parent extends React.Component {
 render(){
   {/* 넘겨주는 값이 한줄로 끝날경우 ()는 생략가능 */}
 	return <Hello name="Jetom" />
 } 
}

이제 부모에서 받은 props는 어떻게 처리해야하는지 조금 더 복잡(?)해진 코드를 통해 알아보자

//Parent.js
//import, export는 생략했다.

class Parent extends React.Component {
	constructor(props){
    	super(props);
      	{/* 초기의 color는 red*/}
      	this.state = {
        	color: 'red'
        }
    }
	
  	render(){
      	return(
          {/*fragments(= <>,</>)는 div 대신 사용 할 수 있다.*/}
        	<>
            	<h1>Parent Component</h1>
            	<Child titleColor={this.state.color}/>
            </>
        )
    }
}

💡 Fragments가 궁금하다면 아래의 공식문서를 살펴보자!
https://ko.reactjs.org/docs/fragments.html

Child라는 자식 컴포넌트의 props로 titleColor를 생성한 뒤, color의 값(= 빨간색)을 전달해주었다. 넘겨준 data를 자식 컴포넌트에서 어떻게 사용하는지 확인해보자!

//Child.js
//Parent와 마찬가지로 import, export 생략

class Child extends React.Component {
  render() {
    return (
      <div>
        {/* 부모 컴포넌트에서 state이지만 자식 컴포넌트에선 props로 전달받는다.*/}
        <h1 style={{color : this.props.titleColor}}>Child</h1>
      </div>
    );
  }
}

위의 예제 코드를 보면 h1 태그의 style에 {{color : this.props.titleColor}}로 나타냈는데, state는 나 자신을 바꿀 때 쓰지만, 이처럼 props는 앞서 말했듯이 값을 전달 받을 때 쓴다! react는 위에서 아래로만(= 단방향)이기 때문에 자식 컴포넌트끼리 데이터를 주고 받을 수 없고 (자식 -> 부모 -> 자식)으로 흐르거나 (부모 -> 자식)으로 흘러야한다. 또한 props는 읽기 전용의 값이므로 바꾸지 못하며 받는 props에 따라 값이 달라진다!

💡 state(= 상태)는 내가 가지는것이기 때문에 바꿀 수 있지만 props는 그저 전달만 받는다.

🤯 state와 props가 너무 너무 헷갈리지만!!! 열심히 과제하면서 익뚝해지려 노력해야겠다...