[React] Props 전달 시 {} 사용하는 이유 / map() 함수

 

 

TodoList 앱 개발 중  간략하게 정리하면 좋을 내용이 생겨 정리하기:) 

 

목차

1. Props에 {} 전달하는이유

2. map() 함수

 

 

 

 

---

 

 

 

1. Props에 {} 전달 하는 이유

 

일단 Props 란 리액트에서 부모 컴포넌트로부터 전달받는 데이터이다.

 

부모 컴포넌트로부터 props 를 전달받을 때 두 가지 방식이 있다.

 

 

 

1. Props 전체를 받음 

const List = (props) => {
  console.log(props.todos);  // 접근하려면 props.todos
}

 

구조분해할당을 하지 않고 전달 props를 전달 받으면, 객체 형태(object)로 전달된다.

 

{ todos : [...] } 형태로 전달 되는 것이다.

객체(object)는 key- value 쌍으로 구성되어 있다.

 

이 props를 꺼내 사용하려면 key값으로 코드에서 다시 접근해줘야 한다.

 

 

 

2. 구조 분해 할당

const List = ({ todos }) => {
  console.log(todos);  // 바로 todos로 접근 가능!
}

 

 

{} 형태로 전달하는 것이 바로 구조 분해할당 방식으로 받는 것,

 

중괄호{} 로 감싸주면 객체의 key 값에 해당하는 값만 보내준다.

따라서 꺼내서 바로 쓸 수 있다!

 

객체나 배열에서 필요한 값만 쉽게 꺼내 쓸 수 있다는 점 뿐만아니라, 

반복해서 props.xxxx 와 같이 매번 안써도 되기 때문에 코드 자체도 간결해지고 가독성을 높인다.

 

 

 

const person = {
  name: "Alice",
  age: 25,
  job: "developer",
  city: "Seoul"
};

// 필요한 값만 구조 분해
const { name, job } = person;

 

또 위와 같이 원하는 값만 뽑아서 쓸 수 있다.

 

const { name, hobby = "없음" } = person;

console.log(hobby);  // person에 hobby가 없으면 "없음" 출력

 

그리고 없는 key에 대해 기본값을 설정해줄 수도 있음!

 

---

 

 

 

2. map() 함수

 

input 창에 입력된 todo list는 배열로 저장이 되고 있다.

이 배열을 화면에 렌더링해 보여주기 위해 사용한 것이 바로 map() 함수 이다.

 

 

 

map함수란?

 배열의 각 요소를 하나씩 꺼내서, 새로운 배열을 만들어주는 함수

 

 

 

 

예시로 아래와 같은 할 일 목록 배열이 있다고 할 때,

const todos = [
  { id: 1, content: "공부하기" },
  { id: 2, content: "운동하기" },
  { id: 3, content: "청소하기" }
];

 

이 배열에서 각각의 항목을 화면에 보여주고 싶을 때 map()을 사용한다.

 

todos.map((todo) => {
  return <div>{todo.content}</div>;
});

 

이렇게 하면 아래와 같은 jsx 배열을 만들어, 화면에 렌더링 된다.

 

<div>공부하기</div>
<div>운동하기</div>
<div>청소하기</div>

 

 

 

 

JSX에서 가능한 이유

 

: JSX에서는 배열 형태로 여러 개의 컴포넌트를 리턴할 수 있기 때문에,
map()을 활용해 반복적으로 리스트를 출력하는 것이 가능하다.

 

 

따라서  React에서 리스트를 출력할 때  map()이 자주 등장할 예정 🙃

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

*Ref

https://ko.legacy.reactjs.org/docs/components-and-props.html

Components와 Props – React