728x90
1. 배운 것
- 딥다이브 13장 - 스코프
- 코딩애플 리액트 - props, react router dom
- react router dom 과제 복습, state&props 과제 예습
2. 내용 정리
리액트 - props
- state는 부모 → 자식 으로만 보내줄 수 있다. 자식 ↔ 자식 끼리도 불가능.
과제 복습 - react router dom
- 리액트 라우터의 주요 컴포넌트 3가지
- BrowserRouter : 라우터 역할
- Routes: 경로를 매칭시켜주는 여러 Route의 상위 컴포넌트
- Link: 경로 변경
- import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; 사용할 컴포넌트 가 있는 파일의 최상단에서 import 해주어야 함.
- BrowserRouter 위치: 둘 중 하나만 적용함. 2번이 더 편리하다.
- index.js 에서 렌더링 할 때 App컴포넌트를 감싸거나
- App 컴포넌트(리턴값)에서 최상단 요소로 위치하여 App 컴포넌트를 감싼다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
- Route컴포넌트에서 경로는 path로 컴포넌트는 element로 연결한다.
// import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
// App 컴포넌트 내부에서 작성하였음.
<Routes>
{/* 경로는 path로 컴포넌트는 element로 연결 */}
<Route path="/" element={<Tweets />} />
<Route path="/mypage" element={<MyPage />} />
<Route path="/about" element={<About />} />
</Routes>
// import { Link } from 'react-router-dom';
// 자식 컴포넌트는 별도 파일로 분리해둔 경우 Link 다시 import 해야 함.
<Link to="/mypage">
<i className="far fa-user"></i>
</Link>
Unit6 - [React] React State & Props
- State: 내부에서 변화하는 값. (변동이 잦은 값은 일반 변수 대신 state에 저장한다.)
- Props: 외부로부터 전달받은 값. (부모 컴포넌트의 state를 자식에게 전달.)
Props
- 컴포넌트의 property(속성) 을 의미한다. 즉 props는 객체 데이터이다.
- 객체이기 때문에 모든 자료형과 함수 등 다양한 값을 전달할 수 있다.
- 읽기 전용인 값으로, 함부로 변경시킬 수 없다.
- props가 읽기 전용 객체가 아닐 경우 하위 컴포넌트에서 props를 수정한 내용이 상위 컴포넌트의 값에 영향을 끼치는 side-effect가 생기기 때문.
- props 사용 방법 3단계:
- 하위 컴포넌트(자식)에 전달하고자 하는 값과 속성을 정의.
- props를 매개변수로 하위 컴포넌트에서 받아 컴포넌트 내부로 값과 속성을 전달.
- 전달받은 props를 렌더링.
// state 변경함수와 배열 데이터인 state를 전달한 예시.
// 부모 컴포넌트의 props를 자식 컴포넌트 <Modal /> 에 전달
// 자식 컴포넌트인 태그 안에 값과 속성을 정의한다.
<Modal changeTitle={changeTitle} articleTitle={articleTitle} />
// 자식 컴포넌트(Modal) 내부에서 props를 전달받는 예시
// props: {articleTitle: Array(3), changeTitle: ƒ}
<div className="modal">
<h4>{props.articleTitle[0]}</h4>
<button
onClick={() =>
props.changeTitle([
'여자 코트 추천',
'쓰리제이에스 하고싶다',
'남자 코트 추천',
])
}
>
제목 변경
</button>
</div>
props.children
- 부모 컴포넌트에 삽입된 자식 컴포넌트의 여는 태그와 닫는 태그 사이에 입력된 값을 자식 컴포넌트에서 props 객체의 children 속성명으로 가져올 수 있다.
function App() {
return (
<div>
<h1>부모 컴포넌트</h1>
<Child>여기에 넣은 값이 전달됨.</Child>
</div>
);
}
function Child(props) {
return (
<p>{ props.children }</p>
);
}
useState 사용법
- 먼저 import 해와야 한다.
import { useState } from 'react';
- useState를 호출한다.( = state 변수를 선언한다)
- useState를 호출한 리턴값은 배열이므로, 배열 구조 분해 할당으로 받아온다.
// 구조 분해 할당으로 1. state 값을 담을 변수, 2. state 변경함수에 값을 할당한다.
// 관습적으로 state 변경함수는 state 이름 앞에 set 을 붙여 작명한다.
let [isChecked, setIsChecked] = useState(false);
// useState: state hook
// false: state 초깃값
- checkbox 타입 input 태그의 onChange 이벤트의 event.target.checked 의 반환값은 불린값이다.
- 다양한 컴포넌트에서 쓰일 state는 최상위 컴포넌트에서 선언하는게 좋다.
- 부모 → 자식 한테만 넘겨줄 수 있기 때문.
- 이벤트 버블링: 후손 html 요소에서 발생한 이벤트가 부모 요소에까지 퍼지는 현상.
- 이벤트버블링을 막으려면: 이벤트 핸들러 함수 몸체 내에서 e.stopPropagation(); 을 써줘야 함.
- 이벤트 핸들러 함수는 비동기 함수이다. (한박자 늦는 이유.)
- slice(): 원본 불변/ splice(): 원본 변경
이벤트 핸들링
- onChange 이벤트는 입력 폼 엘리먼트에 입력값이 들어가는 이벤트가 발생함을 감지한다.
- <input>, <textarea> , <select> 등 입력 폼 요소들은 e.target.value 로 입력값을 받아온다.
단방향 데이터 흐름(one-way data flow)
- 리액트 앱의 개발 방식은 상향식이다. 즉, 먼저 컴포넌트를 만들고 다시 페이지를 조립한다.
- 리액트 앱을 개발 시, 전달받은 디자인을 컴포넌트 계층 구조로 나누는 것을 가장 먼저 해야 한다.
- 단일 책임 원칙: 하나의 컴포넌트는 하나의 한 가지 일만 한다.
- 데이터의 흐름은 하향식이다. 즉 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 부모 컴포넌트의 데이터를 자식 컴포넌트에서 props를 통해 전달받아 dot-notation으로 접근하여 사용.
- 특정 상태(state)를 두 개의 자식 컴포넌트가 접근해야 할 경우 해당 state는 공통 소유 컴포넌트(두 자식의 부모 컴포넌트) 에 위치해야 한다.
참고 자료
3. 리뷰
3.1 좋았던 점
3.2 아쉬웠던 점
3.3 notes
4. 할 일
- React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있도록 정리한다.
728x90
'기록 > 코드스테이츠 프론트엔드' 카테고리의 다른 글
7주 5일차 - REST API, 타입스크립트, 이진 탐색 (0) | 2022.06.10 |
---|---|
7주 4일차 - 네트워크 기초 (0) | 2022.06.09 |
6주차 주말 - 리액트 복습, 개인 공부 (0) | 2022.06.05 |
6주 4일차 - 리액트 기초 (0) | 2022.06.02 |
6주 3일차 - 개인 공부 (0) | 2022.06.02 |