컴포넌트

이전 글(2022.03.30 - [Programming/React] - 컴포넌트로 반복 작업 줄이기!!)에서 반복적인 html을 리액트의 컴포넌트를 통해서 간편화 하는 방법을 알아보았다. 하지만 3개의 연락처를 보여주기 위해서 Contact 컴포넌트를 3번 만드는 작업도 역시나 반복적이다. 그러면 어쩐단 말이야! 이번에는 map()을 이용해서 반복되는 코드를 확 줄여보자! ReactDOM.render( 연락처 , document.getElementById("root") ); 위 코드는 지난번에 작성했던 3개의 연락처를 뿌려주는 코드이다. 같은 결과물을 만드는 거지만 컴포넌트와 map()를 이용하면 아래와 같이 상당히 간단하게 결과물을 만들 수 있다.!!!! import React from "react";..

오른쪽 그림과 같은 결과물을 하드 코딩으로 만들면 아래와 같다. import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( 연락처 선인장 010-1234-1234 b@cactus.com 강아지 010-8888-8888 jack@doggy.com 고양이 +918 372 574 gmail@kitty.com , document.getElementById("root") ); 현재 연락처에는 선인장, 강아지, 고양이만 있어서 다행이지만 연락처가 추가되면 지금처럼 하드코딩으로 하기에는 무리가 있다!! 이럴때 리액트의 특징 중 하나인 컴포넌트를 사용해서 더 손쉽게 연락처 결과물을 만들어 보자! 여기서 잠깐! 리액트의 컴포넌트란? CS에서..