Modern React Redux (6) : Component & Props

yoneeki·2023년 1월 8일

Modern React with Redux

목록 보기

6/8

Creating Reusable Component

재사용한 가능한 컴포넌트

앞전에서 말했듯 리액트의 컴포넌트는 자바스크립트의 함수와 유사한 기능을 수행한다.
특정한 HTML 틀을 함수 불러오듯 쓰고 싶기에 재사용 가능한 컴포넌트를 사용한다.

function ProfileCard() {
	return (
    	<div>
        	<img />
            <h3> ... </h3>
        </div>
    );
}

function App() {
	return(
    	<ProfileCard />
        <ProfileCard />
        <ProfileCard />
    );
}

새 프로젝트 생성하기

ctrl + c로 원래 돌아가던 jsx 프로젝트를 종료하고 pdas라는 프로젝트를 새로 만든다
PDA : Personal Digital Assistant - siri, alexa..
이번에는 폴더를 따로 빼서 리액트 프로젝트를 만들고 싶어서

// 0. 기본 폴더에서 리액트 프로젝트만 따로 모아 둘 새 폴더를 생성해둠. 
ex) reactprac 그리고 나는 그 폴더 안에 pdas 라는 프로젝트를 만들 것임.
// 1. 터미널 : ls
// 2. 터미널 : cd reactprac
// 3. 터미널 : npx create-react-app pdas
// 4. 터미널 : npm start 
// 근데 여기서 오류가 날 수도 있음 
// 5. 그럼 터미널 다시 접속해서 ls -> cd reactprac -> cd pdas
// 6. 그 다음 npm start
// 참고로 상위폴더로 가는 명령어는 cd..

프로젝트 설정

public : index.html 빼고 다 삭제
src : 전부 다 삭제 후 3가지 js 파일 생성 (index.js, App.js, ProfileCard.js)

참고 설명

Props

Data = Props

Props System

Pass data from a parent to a child.

Allows a parent to configure each child differently (show different text, different styles, etc..)

One way flow of data. Child can't ask push props back up.

Like 25% of understanding React.

Communication with Props

// Parent Component
function App() {
	return <Child color="red" /> // 1
} 
// 2 : Props Object → {color:'red'}

// Child Component
function Child(props) { // 3
	return <div>{props.color}</div> // 4
}

// 1. Add attributes to a JSX element.
// 2. React collects the attributes and puts them in an object.
// 3. Props object shows up as the first argument to the child component function.
// 4. We use the props however we wish

Picturing the Movement of Data

function App() {
	return (
    	<div> 
        	<ProfileCard title="Alexa" handle ="@alexa99"/>
            <ProfileCard title="Cortana" handle ="@cortana32" />
            <ProfileCard title="Siri" handle ="@siri01" />
        </div>
    );
}

function ProfileCard(props) {
  return (
    <div>
      <div>Title is {props.title}</div>
      <div>Handle is {props.handle}</div>
    </div>
  );
}

export default ProfileCard;

Props Object 1
key	values
title	"Alexa"
handle	"@alexa99"

↓
ProfileCard Component

Props Object 2
key	values
title	"Cortana"
handle	"@acortana32"

↓
ProfileCard Component

Props Object 3
key	values
title	"Siri"
handle	"@siri01"

↓
ProfileCard Component

Adding Props

props가 어디에서 와서 어디에서 보여지는 건지 그 흐름을 한번 제대로 살펴볼 것
App에서 ProfileCard(JSX)안에 적은 title과 handle이 하나의 키값쌍이 되어 객체 파라미터처럼 작용하고 있음 -----> ProfileCard.js 파일 내부의 ProfileCard 함수가 받는 props 파라미터.

Using Argument Destructing

마지막 버젼이 가장 보기 좋은 이유는 우리가 신경쓰는 건 오직 title과 handle이라는 데이터 뿐인데, 그게 명시적으로 나타나있기 때문이다. props라는 변수명을 쓸 때보다 말이다.

Practice

저 글자들 사이에 색 구분이 없어서 헷갈려서 cmd+click을 해봤더니 저렇게 설명이 떴다.
하지만 좀 당황스러운건 (내가 지금 리액트 배운 지 20시간밖에 안 돼서 그런 걸수도 있지만), 사실 리액트에서는 저 파라미터가 props라는 것이다. 그러나 props는 property의 줄임말이지 않나? 왜 이렇게 혼돈스럽게 만들어 놨지?
그리고 색 구분을 안 해놓으니까 props 받은 그대로 {red : red} 이런 식으로 될 것 같아서 괜히 이상하기도 하고...