1. 리액트 컴포넌트에게 값 전달

react.js 는 자바스크립트 라이브러리로, 재사용성이 뛰어나다는 특징이 있다. 

새로고침을 하지 않아도 수정된 부분이 바로바로 업데이트가 된다. 

 

오늘은 props(property)를 통해 컴포넌트에게 값을 전달하는 방법을 공부했다.

 

우선 App.js에 위와 같이 유저들의 정보가 담긴 배열을 만들어준다. 

 

그리고 위와 같이 컴포넌트 안에 customers 배열을 하나씩 탐색하기 위해 map 함수를 이용하여 모든 배열을 돈다. 

이때, Customer는 미리 만들어둔 Customer.js 의 클래스이다. 여기서 구체적인 UI를 만들었다.

 

Customer는 CustomerProfile 과 CustomerInfo로 이루어져 있다. 여기서 props를 통해 컴포넌트로 값을 받아왔다. 

 

<결과>

 

- 처음 해보는 리액트 공부였는데 생각보다 생소한 개념이 많아서 어려웠다. 컴포넌트나 컴포넌트를 이루는 props, state 등 기본적으로 react.js에서 다루는 개념에 대해서 정확히 알아야 할 것 같다는 생각이 들었다.