6. React - props (read only)&& react 기초 실습

이번 글에서는 props를 이용해서 저번에 코딩한 부분을 출력해보도록 하겠습니다.

props는 예전 createElement()에서 2번째 파라미터에 해당한다고 말씀 드렸었는데요.

기억이 안나시는 분은 https://diarycafe0729.tistory.com/44 에서 다시한번 읽어보시는 걸 추천드립니다.

3. React - Hello World (Element rendering)

props는 컴포넌트간의 통신을 가능하게 해주는 역할을 합니다.

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는데, 여기서 이 객체를 props라고 합니다.

React는 단방향이라고 말씀드렸었는데요. props를 통해서 부모가 자식에게 데이터를 넘겨주고 자식은 props로 그 데이터를 사용할 수 있습니다.

그리고 props에서 또 한가지 중요한 점은 props는 read only 라는 것입니다.

예를 들어 부모->자식1 ->자식2 가 있다고 가정해봅시다.

부모가 자식1에게 넘겨준 데이터를 자식1이 수정한다고해서 부모와 자식2가 모두 변경된 뎅이터로 바귀지 않는다는 것입니다.

실습을 통해서 알아보도록 할게요.

 

1. props를 통해서 부모가 자식에게 데이터를 넘겨주는 것을 확인해볼게요.

bnb.js

const Header = (props) => { console.log("props : ", props) return ( <h1>{props.name}{props.title}</h1> ) } function App () { return ( <div> <Header name="React" title={"님이 호스팅하는 아파트의 개인실"}/> <hr/> </div> ) } ReactDOM.render(<App/>, document.getElementById('root'))

그리고 App component에 지난 시간에 배운 function component로 App과 Header를 만들었습니다.

App component는 Header component를 참조하고 있고 부모가 된 App component는 props객체를 자식인 Header component에 넘겨주고 자식은 그걸 jsx expression( {props.name} )을 통해서 값을 사용하고 있습니다.

이해가 가시나요?

예전에 JSX를 createElement로 보여주는 사이트를 알려드렸었는데요. 위에 코드를 한번 확인해봐요.

 

App component가 createElement로 바뀐 부분(아래쪽 박스)을 보면 createElement의 children부분에 React.createElement가 파라미터로 들어와 있는것을 보실 수 있는데요.

Header라는 type에 name과 title이 JSON형태의 props로 되있는 것을 확인 하실 수 있을 거에요.

이제 Header component를 볼게요.

위쪽 네모 박스를 보시면 type은 h1이고, props는 null이고 children은 props.name과 props.title이라고 명시되어 있는 것을 확인 하실 수 있을 겁니다.

자식 컴포넌트인 Header는 부모의 props를 받아 사용하고 있습니다.

실행에서 console창으로 받은 props를 확인해보셔도 알 수 있는데요.

 

부모의  props를 JSON형태로 받는 것을 확인 하실 수 있을 겁니다.

이 부분이 잘 이해가 가지 않는 분들은 https://diarycafe0729.tistory.com/46글을 한번 보시면서 createElement가 JSX로 어떻게 변경되는지 확인해보시길 바랍니다.

4. React JSX(JavaScript Xml) 문법

지금 감이 잘 안온다 하셔도 괜찮습니다. 만들기로 했던 것을 하다보면 이해가 가실거에요. 일부러 props를 사용하면서 숙달 할 수 있도록 했기 때문이에요.

 

2. props는 read only??!

이번에는 app.js로 확인해볼게요.

app.js

const Age = (props) => <h3>{props.age}</h3> const Person = (props) => { return ( <div> <h1>나의 이름은 : {props.name}</h1> <Age age={props.age}></Age> </div> ) } function App () { return ( <div> <Person name="홍길동" age={20} /> </div> ) } ReactDOM.render(<App/>, document.getElementById('root'))

App라는 부모가 Person에게 props를 전달하고, 그걸 다시 Age component에게 props를 전달한 형태입니다.

Person component에서 전달받은 props.age를 20에서 15로 바꿔보겠습니다.

const Person = (props) => { return ( <div> <h1>나의 이름은 : {props.name}</h1> <Age age={props.age = 15} /> </div> ) }

그리고 다시 실행시켜보겠습니다.

이렇게 ~ read only property 'age' ~ 이란 에러가 발생합니다.

즉, age를 바꾸기 위해서는 부모서부터 데이터의 값을 변경하고 자식에게 전달해주어야 한다는 소리입니다.

그래서 나온 것이 React에서는 redux라는 것입니다. vue에서는 vuex 였던가로 알고있어요.

이것은 나중에 다뤄보겠습니다.