03. props

# What? props가 뭔데?

- 부모 컴포넌트로부터 받은 데이터

 

# Why? 이걸 왜 써?

 

- 부모 컴포넌트로부터 받은 데이터를 토대로 컴포넌트를 만들어야할 때가 있음.

일기 목록

.

# How? 어떻게 쓰는데?

 

@ 부모컴포넌트

import React from 'react';
import 자식컴포넌트 from './자식컴포넌트';

function 부모컴포넌트() {
	let 전달해줄 변수 = "test";
	
	return (
		<div className="App">
			<자식컴포넌트 전달받을때 쓸 변수명={전달해줄 변수} />
            
            // 전달해줄 변수명이 pageName이라 해도, 전달받을때 쓸 변수명을 test라 지으면
            // 자식컴포넌트에서는 해당 변수를 test라는 변수명으로 사용하게됨
            // 보통 똑같이 지음
		</div>
	);
}

export default 부모컴포넌트;

@ 자식컴포넌트

import React, {Fragment} from 'react';

const 자식컴포넌트 = ({전달받을 때 쓴 변수명}) => {
	return (
		<div>
			{전달받을 때 쓴 변수명}
		</div>
	);
};

export default 자식컴포넌트;

 

* map에 대해 알고가기

-> map은 배열의 데이터를 하나하나에 내가 원하는 어떤 작업을 적용하여 탈바꿈할 수 있음

ex. 배열의 모든 데이터 1씩을 더해주고 싶을 때

let items = [1,2,3];

items.map((item) => {
  return item + 1;
});

// items = [2,3,4]

 

* object(객체)에 대해 알고가기

-> 객체는 이름이 지정된 속성 모음(여러 변수의 집합체라고 이해하면 편함)

let user = {
   name : "형준",
   age : 20,
   family = ["엄마", "아빠", "형"],
   hello : () => {
   	 alert("hello");
   }
};

console.log(user.name); // "형준", console.log는 어떤 값을 개발자도구에서 확인해보고 싶을 때 사용
user.hello(); // "hello" alert창이 뜰거임

 

# Practice 연습

1. <Parent> 컴포넌트를 만들고, 부모로부터 받은 comment라는 props를 화면에 뿌려주는 자식 컴포넌트 <Child> 3개 뿌려보기

 

@ Parent.jsx

import React from 'react';
import Child from './Child';

const Parent = ({}) => {
   return (
       <div className="parent">
           <Child comment={"comment01"}/>
           <Child comment={"comment02"}/>
           <Child comment={"comment03"}/>
       </div>
   );
};

export default Parent;   

 

@ Child.jsx

import React from 'react';

const Child = ({comment}) => {
   return (
       <div className="child">
		   {comment}
       </div>
   );
};

export default Child;

 

2. <Parent> 컴포넌트에서 comments 배열 데이터를 만들어 map을 이용하여 Child를 여러개 생성해보기

 

@ Comment

import React from 'react';
import Child from './Child';

const Parent = ({}) => {
	let comments = ["comment01", "comment02", "comment03"];

	return (
		<div className="parent">
			{
				comments.map((comment, index) => {
					return <Child key={index} comment={comment} />
				})
			}
		</div>
	);
};

export default Parent;   

 * 반복문으로 컴포넌트를 나열할 때는 컴포넌트를 구별하는 고유식별값을 넣어줘야함.

 

# Problem 과제

할일 목록(할일은 제목, 설명, 생성일이 포함되어야함)

 

* 코드참고 : https://github.com/ShinHyungJune/react-course/tree/course-3-props