[클라우딩 어플리케이션 엔지니어링 TIL] 240206 - React 기본. 간단한 일기장 프로젝트 2

Intro

---

어제에 이어 일기장 프로젝트 실습을 학습하였다.

React Hooks에 대해 공부했다.

 

 

 

오늘 학습한 내용

---

React에서 배열 사용하기 - 데이터 추가하기

세부 목표

• 배열을 이용한 React의 List에 아이템을 동적으로 추가해보기
• With React 처럼 생각하기

 

컴포넌트 & 데이터 구조 생각해보기

• 최상단 태그 <App />을 기준으로 트리 형태 컴포넌트
• 같은 레벨의 컴포넌트 끼리는 (DiaryEditor, DiaryList) 데이터를 주고받을 수 없다.
• React는 단방향으로만 데이터가 흐른다.
• 따라서, App의 state를 컴포넌트 각각에 전달해 주어야 한다.
• DiaryEditor에서 이벤트가 발생해 setData를 요청하고 App에서 변경된 Data를 DiaryList에 전달한다. ➡️ state 끌어올리기

 

React에서 리스트 데이터 수정하기

세부 목표

• 배열을 이용한 React의 List에 아이템을 동적으로 수정해보기
• With 조건부 렌더링

 

 

React LifeCycle 제어하기

Lifecycle(생애주기)❓

일반적으로 시간에 흐름에 따라, 탄생부터 죽음에 이르는 순간에 따른 단계적인 과정

 

 

 

 

React Hooks

useState, useEffect, useRef...

• 2019년 6월 정식 출시된 기능이다.
• class형 컴포넌트의 길어지는 코드 길이 문제, 중복 코드, 가독성 문제 등을 해결하기 위해 등장했다.

useEffect로 lifecycle 구현하기

import React, { useEffect } from 'react';

useEffect(() => {
  // todo...
}, []);

• 매개변수로 callback함수와 Dependency Array(의존성 배열)을 받는다.
• 의존성 배열 내에 들어있는 값이 변화하면 콜백 함수가 수행된다.
• 빈 배열을 전달 시 최초 한 번만 실행이 된다. ➡️ mount 구현 가능

useEffect(() => {
  console.log('mount!');
}, []);

• Dependency Array를 전달하지 않으면 업데이트될 때마다 실행된다 ➡️ update

useEffect(() => {
  console.log('update!');
});

• unmount 구현

const UnmountTest = () => {
  useEffect(() => {
    console.log('mount!');
    return () => {
      // unmount 시점에 실행되게 됨
      console.log('unmount!');
    };
  }, []);
  return <div>Unmount Testing Component</div>;
};

 

 

 

 

마무리

---

React Hooks가 중요하다는 건 알고 있었지만 제대로 사용하는 방법을 몰랐는데 이번 실습을 통해 알게되었다. 😁