[React] Component, props, map

JSX: JavaScript XML

• 일반 자바스크립트의 형태의 코드로 변환이 가능하다.
• 컴포넌트도 JSX안에 작성이 가능하다.

Jsx02.jsx

실행 화면

 

props:  객체

• 사용하는 컴포넌트에서 객체를 key로 접근한다.

Container.js

 

Component01.jsx

Container에서 Component01로 name값과 color값을 props로전달하여 Component01에서 스타일을 적용하고

이름을 출력할 수 있다.

Component02.jsx

Container에서 Component02태그 내부에 작성한 내용을 props.children으로 가져와 출력할 수 있다.

실행 화면

 

map: 반복되는 컴포넌트를 랜더링하기 위한 함수

• 배열 내 각 요소를 원하는 규칙에 따라 변환 후 새로운 배열을 생성한다.

UserContainer.js

useAsync : 비동기 작업 상태를 관리하게 도와주는 커스텀 훅

1. fetch로 데이터를 받아와 value에 값을 저장하고 isResolved에 비동기 처리 상태를 저장한다.
2. isResolved가 true라면 Users컴포넌트에 value 와 isResolved를 props로 전달한다.

Users.jsx

1. 전달받은 value와 isResolved를 가져온다
2. value의 배열에서 map() 함수로 새로운 배열을 만든다.
3. 가져온 value값에서 name과 id값을 추출하여 User컴포넌트에게 전달한다.

User.jsx

1. 전달받은 id와 name을 가져온다
2. li태그를 각각 고유의 키값인 id값으로 지정한다.
3. 구별된 li태그 내부에 해당하는 name값을 출력한다.

실행 화면