리액트 맛보기 4일차

안녕하세요 🐸 리액트 맛보기 4일차 입니다!

01. map()

리액트의 가장 큰 장점 중 하나는 바닐라 자바스크립트를 잘 활용할 수 있다는 것입니다. map() 은 자바스크립트에서 배열 객체에서 사용할 수 있는 메서드 입니다. map() 은 배열의 모든 객체에 대해 주어진 함수를 처리한 결과를 모은 새로운 배열을 반환합니다.

아래의 형태로 사용합니다.

배열.map((요소, 인덱스)=> 함수)

여기서 인덱스는 생략할 수 있습니다.

사용 예시

const array1 = [1,2,3,4,5];

// {}를 생략한 방식
const array2 = array1.map((x)=> x *2);

// {} 내에 return을 사용한 방식
const array3 = array1.map((x)=>{return x * 2});

// {} 대신 ()를 사용하여 단일 표현식을 쓰는 방식. return이 불필요
const arrya4 = array1.map((x)=>(x*2));

보통은 복잡한 로직이 있는게 아니라면 중괄호를 사용하지 않고 바로 사용하는 것이 편해 보입니다.

02. 배열을 사용하여 랜더링 하기

앞서 리액트는 자바스크립트의 문법을 사용할 수 있음을 공부했습니다. 그리고 map() 함수에 대해서도 공부했습니다. 리액트에서 이를 통해 배열의 값을 이용해 컴포넌트를 만들 수 있습니다. JSX 내에서 자바스크립트를 사용하기 위해서는 중괄호({}) 를 사용합니다.

사용 예시

function App(){

	const items = [
		{name : '철수',age : 5}
		,{name : '짱구',age : 5}
		,{name : '맹구',age : 5}
		,{name : '훈이',age : 5}
		,{name : '유리',age : 5}
		,{name : '나미리',age : 24}
		,{name : '권지옹',age : 48}
	]

	return(
		<div>
		{/* JSX 내에서 자바스크립트를 사용하기 위해 중괄호를 엽니다 */}
			{
				items.map((item,index) => (
				<div>
					<p>이름 : {item.name}</p>
					<p>나이 : {item.age}</p>
				</div>				
				))
			}
		</div>
	)
}

위의 방식을 통해 배열의 요소를 이용하여 손쉽게 원하는 객체를 만들 수 있습니다.