이해도 자가 점검 리스트
Chapter1. React State & Props
✔︎ state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.
✔︎ React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.
✔︎ React 컴포넌트(React Component)에 props를 전달할 수 있다.
✔︎ 이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.
✔︎ 실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다.
✔︎ 실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다.
✔︎ React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.
✔︎ JSX 문법의 기본과 컴포넌트 기반 개발에 대해서 숙지한다.
✔︎ React Router DOM으로 React에서 SPA(Single-Page Application)을 구현할 수 있다.
✔︎ state hook을 이용하여, 컴포넌트에서 데이터를 변화시킬 수 있다.
✔︎ props를 이용하여, 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 수 있다.
✔︎ 바람직한 컴포넌트 구조와 state와 props의 위치에 대해 고민한다.
state와 props정의
- state : 내부에서 변화하는 값,
- props : 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당, 성별이나 이름처럼 변하지 않는 외부로부터 전달받은 값
props의 특징
- 컴포넌트의 속성(property)을 의미
- 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값
- 객체 형태
- props는 읽기 전용
How to use props
props를 사용하는 방법은 아래와 같이 3단계 순서로 나눌 수 있습니다.
- 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
- props를 이용하여 정의된 값과 속성을 전달한다.
- 전달받은 props를 렌더링한다.
props를 사용하기 위해 우선 Parent와 Child라는 컴포넌트를 선언하고, Parent컴포넌트 안에 Child컴포넌트를 작성한다.
function Parent() {
return (
<div className="parent">
<h1>I'm the parent</h1>
<Child /> <------ 여기에 속성 및 값 할당
</div>
);
};
function Child() {
return (
<div className="child"></div>
);
};전달하고자 하는 속성 및 값을 할당
- 방법1. 속성을 선언하고, 전달하고자 하는 값을
중괄호{}를 이용하여 감싸준다.<Child attribute={value} /> ` - 방법2. text라는 속성을 선언하고, 이 속성에 "I'm the eldest child"라는 문자열 값을 할당하여 컴포넌트에 전달한다.
<Child text={"I'm the eldest child"} />
Parent 컴포넌트에서 전달한 값을 Child 컴포넌트에서 받는다.
- 함수에 인자를 전달하듯, React 컴포넌트에 props인자를 전달하면 이props가 모든 데이터를 가지고 온다.
function Child(props) {
return (
<div className="child"></div>
);
};props를 렌더링한다.
- props를 렌더링하려면 JSX 안에 직접 불러서 사용하면 됩니다.
- 다만, props는 객체형태이고, 이 객체의 { key : value }는 Parent컴포넌트에서 정의한 { attribute : value }의 형태를 띠고 있다.
function Child(props) {
return (
<div className="child">
<p>{props.text}</p>
</div>
);
};How To Use State
- React에서는 state 를 다루는 방법 중 하나로 useState 라는 특별한 함수를 제공
useState 문법
const [state저장변수, state갱신함수] = useState(상태 초기 값);
useState 동작원리
const react = () => {
let state저장변수 = 상태 초기 값;
const state갱신함수 = (value) => {
state저장변수 = value;
};
const useState = () => {
return [state저장변수, state갱신함수];
};
};useState 사용법
React로부터 useState 를 불러온다.
import { useState } from "react";useState문법을 이용해서 작성
function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
// const [state 저장 변수, state 갱신 함수] = useState(state 초깃값);
// isChecked : state를 저장하는 변수
// setIsChecked : state isChecked 를 변경하는 함수
// useState : state hook
// false : state 초깃값 state 변수에 저장된 값을 사용하려면 JSX 엘리먼트 안에 직접 불러서 사용
- 여기서는 isChecked 가 boolean 값을 가지기 때문에 true or false 여부에 따라 다른 결과가 보이도록 삼항연산자를 사용
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>state를 갱신하려면 state 변수를 갱신할 수 있는 함수인 setIsChecked 를 호출
function CheckboxExample() {
const [isChecked, setIsChecked] = useState(false);
const handleChecked = (event) => {
setIsChecked(event.target.checked);
};
return (
<div className="App">
<input type="checkbox" checked={isChecked} onChange={handleChecked} />
<span>{isChecked ? "Checked!!" : "Unchecked"}</span>
</div>
);
}주의점
React 컴포넌트는 state가 변경되면 새롭게 호출되고, 리렌더링된다. 따라서, React state는 상태 변경 함수 호출로 변경해야 합니다. 강제로 변경을 시도하면 안 된다.
코드스테이츠 과제를 진행하며..
이번 과제는 그동안 배웠던 react, react-router로 spa를 구현, react state&props 등을 총동원하여 트위터 페이지를 만들어보는 과제였다.
먼저 각각의 컴포넌트를 구현해야 했고 router로 spa를 구현하고 state와 props를 이용해 새로운 트윗이 올라오면 어떤 state가 되는지 구상하고 코드를 적어야 했다.
추가적으로 트윗을 작성한 사용자를 조회할 수 있도록 dropdown메뉴를 만들고 필터링하는 기능을 구현했다.
또한, 삭제버튼을 추가하고 작성한 트윗이 삭제 되도록 하였다.
너무 어려운 과제여서 시간이 걸렸지만 이번 유닛을 이해하는데 많은 도움이 되었다.
나의 과제.. https://github.com/shimeeuisuk/fe-sprint-react-twittler-state-props-master
