prerequisite

+ 자바스크립트 Array 메서드 map forEach 차이점

+ 자바스크립트 Array iteration 연습: 과제게시판 1주차과제 javascript1

props 기본 개념

props는 엘리먼트 뒤에 덧 붙여지는 속성이다. 이 props를 통해서 부모가 자식에게 데이터를 내려줄 수도 있고, 콜백펑션을 props를 내려줘서 자식과 부모간에 통신도 가능하게 한다.

즉, props의 가장 중요한 점은 컴포넌트간의 통신을 가능하게 한다는 점이다.

그리고, 그 통신은 부모에서 자식으로도 가능하고 자식에서 부모로도 가능하다. 향후, redux로 통신방법이 바뀌더라도 이 기본 개념은 변하지 않는다.

read only props

Header 컴포넌트에 properties 혹은 props 를 설정하고 props값이 어떻게 전달되고 받는지 살펴본다. 먼저 Header 컴포넌트에서는 html attribute처럼 설정한다. title은 스트링으로 넘어갈 것이고 totalPlayers는 JSX expression으로 설정했으므로 number 타입으로 넘어갈것이다.

주석을 넣는 방법은 JSX express 안에 슬래쉬 별로 들어가 있는데 웹스톰에서는 control + / 를 누르면 자동으로 처리해준다.

Header 에서는 먼저 console.log 창에서 출력해보면 props가 객체로 넘어온다는것을 확인할 수 있이다. 그러면 JSX expression으로 해당값을 출력한다.

여기서 기억해야 할 것은 pros는 read only (or immutable) 이라는것이다. 즉, 읽기만 해야지 그 값을 변경하면 안된다. 컴포넌트 트리에서 높은쪽에 있는 부모 컴포넌트가 property 값을 소유하고 있고 또한 수정 등의 컨트롤을 할 수 있지만 자식이 그 값을 변경하게 되면 리액트는 에러를 던진다. props.title = ‘test’ 로 테스트해보자.

만일 속성이 여러개이면 한줄씩 개행하고 indent 처리하는게 일반적이다. 속성값이 명시적으로 true인 경우는 생략해도 된다. 또한 값은 더블 쿼테이션으로 감싸는것이 일반적이다.

Resuable Components

Player가 한명이 아니라 아래와 같이 여러명이 있을 경우를 고려해보자. Player의 name 과 score props를 App에서 전달하자

Player 컴포넌트에서 name 을 표시하고 score는 Player 컴포넌트에서 처리하는게 아니라 하위 컴포넌트인 Counter 컴포넌트로 다시 넘겨야 한다.

Display iterating players

여러개의 player들을 가지고 있는 json Array데이터가 아래와 같이 정의되어있다고 가정하자. 실제로는 서버에서 REST API 형태로 가져오겠지만 여기서는 mockup 데이터라고 생각하자.

만일, angular 라면 ngFor 라는 디렉티브를 vue 라면 v-for 라는 반복문을 하기 위한 별도의 template language를 사용할 것이다. 그러나 리액트는 별도의 template 언어가 없고 순수하게 자바스크립트 언어만을 사용해서 반복문을 구현한다.

이 json Array를 top-level 엘리먼트인 App에 props로 입력한 후에 다시 App 컴포넌트에서 props로 받은 후에 player에게 전달한다. props 는 read only 이기 때문에 최상단 엘리먼트가 모든 props를 다 가지고 있다가 그걸 자식에게 넘겨주는 형태가 바람직하다.

map은 새로운 배열을 리턴한다. JSX expression은 모두 { } 안에 포함되어져야 한다. 실행은 잘되지만 콘솔창을 보면 warning이 발생할것이다. player Array를 특정한 key로 구분해야 한다.

– note

– ToDo

TodoApp 컴포넌트에 initData로 배열을 넣었다. 이 데이터를 Todo까지 내려서 목록 리스트를 구성해보자.

See the Pen react todo 2 – props 로 화면 구성 by LeeDongKee (@eastflag) on CodePen.default

– quiz