FE RYAN
완벽하지 않으면 어때
FE RYAN
전체 방문자
오늘
어제

블로그 메뉴

  • 💾 깃허브 링크
  • 홈
  • 태그
  • 분류 전체보기 (151)
    • 개인프로젝트 (8)
      • 개인 포트폴리오 웹앱 (6)
      • 프론트엔드 기술면접 아카이빙 웹앱 (2)
    • 기록 (121)
      • 원티드 프리온보딩 인턴십 (0)
      • 코드스테이츠 프론트엔드 (75)
      • 생각들 (3)
      • Today I learned (32)
      • 회고 (9)
      • 리뷰 (1)
    • 개발 (17)
      • React (3)
      • Javascript (7)
      • CSS (1)
      • HTML (3)
      • HTTP (1)
      • 자료구조 (0)
      • 알고리즘 (2)
    • 코딩테스트 (2)
      • 백준 (2)
      • 프로그래머스 (0)
    • 디자인 (1)
      • UI & UX (1)
    • 수학 (0)
    • 자기계발 (0)

공지사항

인기 글

태그

  • 원시타입
  • ES6
  • seb39
  • Til
  • 타입스크립트
  • seb 39
  • 부트캠프
  • 메인프로젝트
  • 프론트엔드
  • HTML
  • 자바스크립트
  • 딥다이브
  • 자바스크립트 딥다이브
  • 회고
  • 코드스테이츠
  • 리액트
  • 포트폴리오
  • css
  • useMemo
  • 신입개발자

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
FE RYAN
기록/코드스테이츠 프론트엔드

7주 1일차 - 리액트, 스코프 개인 공부

기록/코드스테이츠 프론트엔드

7주 1일차 - 리액트, 스코프 개인 공부

2022. 6. 7. 11:15
728x90

1. 배운 것

  • 딥다이브 13장 - 스코프
  • 코딩애플 리액트 - props, react router dom
  • react router dom 과제 복습, state&props 과제 예습

2. 내용 정리

리액트 - props

  • state는 부모 → 자식 으로만 보내줄 수 있다. 자식 ↔ 자식 끼리도 불가능.

과제 복습 - react router dom

  • 리액트 라우터의 주요 컴포넌트 3가지
    1. BrowserRouter : 라우터 역할
    2. Routes: 경로를 매칭시켜주는 여러 Route의 상위 컴포넌트
    3. Link: 경로 변경
  • import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'; 사용할 컴포넌트 가 있는 파일의 최상단에서 import 해주어야 함.
  • BrowserRouter 위치: 둘 중 하나만 적용함. 2번이 더 편리하다.
    1. index.js 에서 렌더링 할 때 App컴포넌트를 감싸거나
    2. 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단계:
    1. 하위 컴포넌트(자식)에 전달하고자 하는 값과 속성을 정의.
    2. props를 매개변수로 하위 컴포넌트에서 받아 컴포넌트 내부로 값과 속성을 전달.
    3. 전달받은 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
  • 1. 배운 것
  • 2. 내용 정리
  • 리액트 - props
  • 과제 복습 - react router dom
  • Unit6 - [React] React State & Props
  • Props
  • props.children
  • useState 사용법
  • 이벤트 핸들링
  • 단방향 데이터 흐름(one-way data flow)
  • 참고 자료
  • 3. 리뷰
  • 3.1 좋았던 점
  • 3.2 아쉬웠던 점
  • 3.3 notes
  • 4. 할 일
'기록/코드스테이츠 프론트엔드' 카테고리의 다른 글
  • 7주 5일차 - REST API, 타입스크립트, 이진 탐색
  • 7주 4일차 - 네트워크 기초
  • 6주차 주말 - 리액트 복습, 개인 공부
  • 6주 4일차 - 리액트 기초
FE RYAN
FE RYAN

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.