개발일기

■ UseMemo, UseCallback, UseRef

- useMemo()

:  Memoized value를 리턴하는 hook

Memoization
최적화를 위해 사용하는 개념
비용이 높은, 즉 연산량이 많이 드는 함수의 호출 결과를 저장해 두었다가 같은 입력 값으로
함수를 호출하면 새로 함수를 호출하는 것이 아닌 저장해 놓은 호출 결과를 반환하는 것
Memoization된 결과 값을 영어로 Memoized Value라 한다.

- useMemo() 사용법

# useMemoHook은 파라미터로 memoizedValue를 생성하는 create 함수와 의존성 배열을 받는다.

# Memoization 개념처럼 의존성 배열에 들어가 있는 변수가 변했을 때 새로 create 함수를 노출하여

   결과값을 반환하며, 아닌 경우에는 기존 함수의 결과값을 그대로 반환한다.

# useMemo 훅을 사용하면 컴포넌트가 다시 랜더링될 때마다 높은 연산량의 작업이 반복되는 것을 피할 수 있다.

※ useMemo로 전달된 함수는 랜더링이 일어나는 동안 실행된다.

※ 랜더링이 일어나는 동안 실행되서는 안될 작업을 useMemo의 함수에 넣으면 안된다.

ㄴ 예 : useEffectHook에서 실행되어야할 사이드 이펙트

 ㄴ 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 작업 등은 랜더링이 일어나는 동안

      실행되서는 안되기 때문에 useMemo 훅 함수에 넣으면 안되고 useEffectHook을 사용해야 한다.

# useMemo 훅에 의존성 배열을 넣지 않으면 의미가 없다!

# 의존성 배열에 빈 배열을 넣게 되면 컴포넌트가 마운트 될 때만 create 함수가 호출되며,

   마운트 이후에는 값이 변하지 않는다.

※ 마운트 시점에만 한 번 값을 계산할 필요가 있는 경우에만 위 코드와 같이 의존성에 빈 배열 사용

# 대부분 useMemo 훅에 의존성 배열의 변수들을 넣고 해당 변수들의 바뀜에 따라 새로운 값을 계산할 때 사용

- useCallback()

: useMemo() Hook과 유사하지만 값이 아닌 함수를 반환한다.

  컴포넌트가 랜더링 될 때마다 매번 함수를 새로 정의하는 것이 아닌

  의존성 배열의 값이 바뀐 경우에만 함수를 새로 정의해서 리턴해주는 것이 특징

- useCallback() 사용법

# useCallbackHook은 유즈메모훅과 동일하게 함수와 의존성 배열을 파라미터로 받는다.

  파라미터로 받는 이 함수를 callback이라 한다.

# 의존성 배열에 있는 변수 중 하나라도 변경도면 메모이제이션된 콜백 함수를 반환한다.

# 유즈 콜백 훅을 사용하지 않고 컴포넌트 내에 함수를 정의할 시 매번 랜더링 발생 시 함수가 새로 정의된다.

# useCallbackHook을 사용하여 특정 변수의 값이 변한 경우에만 함수를 다시 정의하여 불필요한 반복작업을 없애준다.

예시 코드)

# useCallback을 사용하면 특정 변수의 값이 변한 경우에만 함수를 다시 정의하게 되므로
   함수가 재저의 되지 않은 경우에는 자식 컴포넌트도 재 랜더링이 일어나지 않는다.

# 의존성 배열에 빈 배열이 들어갔기 때문에 컴포넌트가 처음 마운트되는 시점에만 함수가 정의되고
   이후에는 재정의 되지 않으며, 결국 자식 컴포넌트도 불필요한 재랜덩이 발생하지 않는다.

- useRef()

: Reference를 사용하기 위한 Hook

  React에서 레퍼런스란 특정 컴포넌트에 접근할 수 있는 객체를 의미한다.

  그리고 useRefHook은 이 레퍼런스 객체를 반환한다.

# current 속서은 현재 레퍼런스하고 있는 엘리먼트를 의미한다.

- useRef() 사용법

# 파라미터로 초기값을 넣으면 해당 초기값으로 초기화된 레퍼런스 객체 반환

# 초기값이 null 인 경우 current의 값이 null인 레퍼런스 객체 반환

# 반환된 레퍼런스 객체는 컴포넌트 라이프타임 전체에 걸쳐 유지된다.

※ useRefHook은 변경 가능한 current라는 속성을 가진 하나의 상자

예시 코드)

# useRefHook을 사용하여 버튼 클릭 시 input에 포커스를 하도록 하는 코드

# 초기 값은 null로 결과로 반환된 inputElim이란 레퍼런스 객체를 input 태그에 작성

   버튼 클릭 시 호출되는 함수에서 inputElim.current를 통해 실제 엘리먼트에 접근하여 포커스 함수 호출

# 리액트에서는 화면과 같이 코드를 작성하면 노드가 변경될 때마다 myref의 current 속성에

   현재 해당되는 DOM 노드를 저장한다.

# ref 속성과 기능은 비슷하나 useRefHook은 클래스의 instance 필드를 사용하는 것과

  유사하게 다양한 변수를 저장할 수 있다는 장점이 있다.

※ useRefHook은 일반적인 자바스크립트 객체를 리턴한다.

# 코로 current 속성을 변경한다고 해서 재 랜더링이 일어나지 않는다.

- DOM 노드에 연결되거나 분리되었을 경우에 다른 코드를 실행하고 싶다면?

# DOM 노드의 변화를 알기 위한 기초적인 방법

예제 코드)

# useCallbackHook을 사용하는 callbackRef를 사용하는 방식

# useRefHook을 사용하면 레퍼런스 객체가 current 속성의 변경 유무를 알려주지 않기 때문!

# callback-ref 방식을 사용하면 자식 컴포넌트가 변경되었을 때 알림을 받을 수 있고 이를 통해 다른 정보 업데이트 가능

■ React Hooks

# 컴포넌트에는 함수 컴포넌트와 클래스 컴포넌트가 있다.

# state는 랜더링에 필요한 데이터를 관리하게 된다.

# 클래스 컴포넌트에서는 생성자인 컨스트럭트에서 state를 정의하고 setState를 통해 state를 업데이트 한다.

   클래스 컴포넌트는 state와 관련된 기능 뿐만 아니라 컴포넌트의 생명주기 함수들까지 명확하게 정의되어 있다.

# 함수 컴포넌트는 클래스 컴포넌트와는 다르게 코드도 간결하고 별도로 state를 정의해서 사용하거나

   컴포넌트의 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없다.

   이런 기능을 지원하기 위해 나온 기능이 바로 Hook이다.

- Hook 이란?

# Hook을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현 가능

# Hook은 갈고리란 뜻을 가지고 있는데 프로그래밍에서는 기존에 존재하는 어떤 기능에 갈고리를 거는 것 처럼

   끼어 들어가 같이 수행되는 것을 의미한다. 비슷하게 사용되는 용어로는 webhook이 있다.

# React의 Hook은 state와 생명주기 기능 등에 갈고리를 걸어 원하는 시점에 함수를 실행되도록 만든 것!

   이 때 실행되는 함수를 hook이라 부르기로 한 것이다.

# 이런 hook의 이름은 모두 use로 시작된다.

   hook이 수행하는 기능에 따라 이름을 짓게 되는데 각 기능을 사용하겠단 의미로 use를 앞에 붙인다.

# 개발자가 직접 커스텀 훅을 만들어 사용도 가능하며, 커스텀 훅은 개발자 마음대로 이름을 지을 수 있지만

   훅의 규칙에 따라 이름 앞에 use를 붙여 훅이라는 것을 나타내야 한다.

- 가장 대표적인 Hook

1. useState()
   # state를 사용하기 위한 hook
   # 함수 컴포넌트에서는 기본적으로 state라는 것을 제공하지 않아 클래스 컴포넌트처럼 state 사용 희망 시 필요
   
   
   예제 코드)
   

   

   # 카운터 컴포넌트는 버튼을 클릭하면 카운트를 하나씩 증가시키고 현재 카운트를 보여주는 단순한 컴포넌트
   # 카운트를 함수의 변수로 선언해서 사용하면 버튼 클릭 시 값을 증가시킬수 있지만, 재 랜더링이 일어나지 않아
      새로운 카운트 값이 화면에 표시되지 않는다.
   # 이 경우 state를 사용해서 값이 바뀔 때 마다 재 랜더링 되도록 해야하며,
      useState를 사용하여 state를 선언하고 업데이트 해야한다.
   
   
   - useState() 사용법
   

   

   # useState를 노출할 때 파라미터로 선언할 state의 초기값 필요
   # 클래스 컴포넌트의 생성자에서 state를 선언할 때 초기값을 넣어주는 것과 동일
   # 초기값을 넣어 useState를 노출하면 return 값으로 배열이 나온다.
      ※ return된 배열의 두 가지 항목
      - 첫 번째 항목은 state로 선언된 변수
      - 두 번째 항목은 state의 set 함수
   
   
   - useState 사용 예제)
   

   

   # useState를 사용하여 카운트 값을 state에 관리하도록 만든 코드
   # state의 변수명과 set 함수 : count, setCount
   # userState는 변수 각각에 대해 set함수가 따로 존재한다.
   
   
2. useEffect()
   # side effect를 수행하기 위한 Hook
   # side effect : 부작용이란 뜻으로 개발자가 의도치 않은 코드가 실행되면서
      버그가 발생하면 사이드 이팩트가 발생했다고 한다.
   # React에서 말하는 사이드 이펙트는 효과 또는 영향을 뜻하는 이펙트 의미에 가깝다.
   # 예시 : 서버에서 데이터를 받아오거나 수동으로 DOM을 변경하는 등의 작업을 의미
   # 위와 같은 작업을 이펙트라 부르는 이유는 해당 작업들이 다른 컴포넌트에 영향을 미칠 수 없으며,
      랜더링 중에는 작업이 완료될 수 없기 때문이다.
      그래서 이런 작업들이 사이드로 실행된다는 의미에서 사이드 이펙트라 불린다.
   ※ useEffect는 리액트의 함수 컴포너트에서 사이드 이펙트를 실행할 수 있게 해주는 훅!
   # 유즈 이펙트는 클래스 컴포넌트에서 제공하는 생명주기 함수인 컴포넌트 디드 마운트 컴포넌트,
      디드 업데이트, 컴포넌트 윌 업마운트와 동일한 기능을 하나로 통합해서 제공한다.
      즉 useEffect는 생명주기 함수와 동일한 기능을 수행한다.
   
   
   - userEffect() 사용법
   

   

   # 의존성 배열은 해당 이펙트가 의존하고 있는 배열로 배열안에 있는 변수 중 하나라도 값이 변경되었을 때 실행
   # 이펙트 함수는 처음 컴포넌트가 랜더링된 이후와 업데이트로 인한 재 랜더링 이후에 실행된다.
      만약 이펙트 하수가 mount와 unmount 시 단 한번씩만 실행되게 하고 싶을 때 의존성 배열에 빈 배열 넣으면 가능▼
   

   

   # 위 코드 작성 시 해당 이펙트가 props나 satate에 있는 어떤 값에도 의존하지 않는 것이 되므로 여러번 실행 안됨
   # 의존성 배열은 생략도 가능하며, 생략 시 컴포넌트가 업데이트 될 때마다 호출된다.
   
   
   - useEffect 사용 예제)
   

   

   # useEffect를 사용해서 클래스 컴포넌트에서 제공하는 componentDidMount, componentDidUpdate와 같은
      생명주기 함수의 기능을 동일하게 수행하도록 만든 코드
   # useEffect()에서는 브라우저에서 제공하는 API를 사용해서 document.title 업데이트
   # 위 코드처럼 의존서 배열 없이 useEffect를 사용하면 React는 DOM이 변경된 이후
      해당 이펙트 함수를 실행하라는 의미
   # 컴포넌트가 처음 랜더링 될 때 포함하여 매번 랜더링 시  이펙트가 실행된다.
   # 이펙트는 함수 컴포넌트 안에 선언되기 때문에 해당 컴포넌트의 props와 state 접근이 가능하다.
   
   
   - componentWillUnmount와 동일한 기능 구현 예제)
   

   

   # useEffect에서 먼저 서버 API를 사용하여 사용자의 상태를 구독하고 있다.
   # 이후 함수 하나를 리턴하며, 해당 함수에는 구독을 해지하는 api를 호출하도록 되어있다.
   # useEffect에서 리턴하는 함수는 컴포넌트가 mount 해제, 즉 unmount될 때 호출된다.
   ※ 결과적으로 useEffect의 리턴 함수 역할은 componentWillUnmount함수가 하는 역할과 동일!
   
   
   - 두 개의 useEffectHook 사용 예제)
   # 하나의 컴포넌트에서 여러개 사용이 가능하다.
   

   

3. 마지막 정리
   

   

1. chapter_06 폴더 생성
2. Notification.jsx 파일 생성 후 코드 작성
   

   import React from "react";
   
   const styles = {
       wrapper: {
           margin: 8,
           padding: 8,
           display: "flex",
           flexDirection: "row",
           border: "1px solid grey",
           borderRadius: 16,
       },
       messageText: {
           color: "black",
           fintSize: 16,
       },
   };
   
   class Notification extends React.Component {
       constructor(props) {
           super(props);
   
           this.state = {}; // Notification 컴포넌트는 state에 값을 가지고 있지 않다.
       }
   
       render() {
           return (
               <div style={styles.wrapper}>
                   <span style={styles.messageText}>{this.props.message}</span>
               </div>
           )
       }
   }
   
   export default Notification;

3. NotificationList.jsx 파일 생성 후 코드 작성
   

   import React from "react";
   import Notification from "./Notification";
   
   const reservedNotifications = [
       {
           message: "안녕하세요, 오늘 일정을 안내드립니다.",
       },
       {
           message: "저녁식사 시간입니다.",
       },
       {
           message: "이제 곧 미팅이 시작됩니다.",
       },
   ];
   
   var timer;
   
   class NotificationList extends React.Component {
       constructor(props) {
           super(props);
   
           this.state = {
               notifications: [],
           };
       }
   
       componentDidMount() {
           const { notifications } = this.state;
           timer = setInterval(() => {
               if (notifications.length < reservedNotifications.length) {
                   const index = notifications.length;
                   notifications.push(reservedNotifications[index]);
                   this.setState({
                       notifications: notifications,
                   });
               } else {
                   clearInterval(timer);
               }
           }, 1000);
       }
   
       render() {
           return (
               <div>
                   {this.state.notifications.map((notification) => {
                       return <Notification message={notification.message} />;
                   })}
               </div>
           )
       }
   }
   
   export default NotificationList;

   
   #notificationList 컴포넌트는 notification 컴포넌트를 목록 형태로 보여주기 위한 컴포넌트다.
   
   # 처음 생성자에서 notification라는 이름의 빈 배열을 state에 넣었다.
      이처럼 생성자는 앞으로 사용할 데이터를 state에 넣어 초기화 한다.
   
   # 클래스 컴포넌트의 생명주기 함수 중 하나인 컴포넌트 디드 마운트 함수에서는
     자바스크립트의 setInterval 함수를 사용하여 매 1000ms, 즉 1초마다 정해진 작업을 수행한다.
     이작업은 미리 만들어문 알림데이터 배열인 reserved notifications로 부터 알림데이터를 하나씩 가져와
     state에 있는 notification 배열에 넣고 업데이트 한다.
   
   # state를 업데이트하기 위해 setState 함수를 사용했다.
      클래스 컴포넌트에서 state를 업데이트 하기 위해선 반드시 setState 함수를 사용해야 한다.
   
   
4. index.js 파일 수정
   

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import './index.css';
   // import App from './App';
   import reportWebVitals from './reportWebVitals';
   // import Clock from './chapter04/clock';
   //import CommentList from './chapter_05/Comment-list';
   import NotificationList from './chapter_06/NotificationList';
   
     const root = ReactDOM.createRoot(document.getElementById('root'));
     root.render(
       <React.StrictMode>
         <NotificationList />
       </React.StrictMode>
     );
   
   // If you want to start measuring performance in your app, pass a function
   // to log results (for example: reportWebVitals(console.log))
   // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
   reportWebVitals();

   # NotificationList 컴포넌트를 임포트해서 ReactDOM.render 함수에 넣어주는 코드다.
   
   결과 이미지)
   

   

- React Developer Tools 사용하기

: React 애플리케이션을 개발할 때에는 Chrome 개발자 도구의 Elements 탭을 통해 확인하는 것 보다

  React를 위해 별도로 개발된 React Developer Tools라는 도구를 이용하는 것이 더 좋다.

※ 설치 URL : https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?pli=1

# 각 컴포넌트별로 프롭스와 스테이트도 확인할 수 있다.

# profiler를 사용하면 어떤 컴포넌트가 랜더링 되는지 랜덜이 시간이 얼마나 소요되었는지

   그리고 컴포넌트가 왜 다시 랜더링 되었는지 등을 확인할 수 있다.

   이를통해 불필요하게 랜덜이되거나 무거운 컴포넌트를 찾아 최적화함으로써 성능 향상이 가능하다.

- Lifecycle method 사용해보기

1. Notification.jsx 수정
   

   import React from "react";
   
   const styles = {
       wrapper: {
           margin: 8,
           padding: 8,
           display: "flex",
           flexDirection: "row",
           border: "1px solid grey",
           borderRadius: 16,
       },
       messageText: {
           color: "black",
           fontSize: 16,
       },
   };
   
   class Notification extends React.Component {
       constructor(props) {
           super(props);
   
           this.state = {}; // Notification 컴포넌트는 state에 값을 가지고 있지 않다.
       }
   
       componentDidMount() {
           console.log("componentDidMoint() called. ");
       } //추가
   
       componentDidUpdate() {
           console.log("componentDidUpdate() called.");
       } //추가
   
       componentWillUnmount() {
           console.log("componentWillUnmount() called.");
       } //추가
   
       render() {
           return (
               <div style={styles.wrapper}>
                   <span style={styles.messageText}>{this.props.message}</span>
               </div>
           )
       }
   }
   
   export default Notification;

   # 3가지 생명주기 함수들이 호출 될 경우 콘솔에 로그를 남기도록 코드 수정
     해당 함수는 각각 컴포넌트가 마운트된 이유, 업데이트된 이유, 컴파운트가 언마운트되기 전 호출될 것이다.
   
   
   결과 이미지)

   

   # 하지만 이렇게 되면 로그가 중복되어 구분이 힘들다.
   
   
2. 로그가 함께 나오게 하기 위해 NotificationList.jsx에 id 추가
   

   import React from "react";
   import Notification from "./Notification";
   
   const reservedNotifications = [
       {
           id: 1,
           message: "안녕하세요, 오늘 일정을 안내드립니다.",
       },
       {
           id: 2,
           message: "저녁식사 시간입니다.",
       },
       {
           id: 3,
           message: "이제 곧 미팅이 시작됩니다.",
       },
   ];
   
   var timer;
   
   class NotificationList extends React.Component {
       constructor(props) {
           super(props);
   
           this.state = {
               notifications: [],
           };
       }
   
       componentDidMount() {
           const { notifications } = this.state;
           timer = setInterval(() => {
               if (notifications.length < reservedNotifications.length) {
                   const index = notifications.length;
                   notifications.push(reservedNotifications[index]);
                   this.setState({
                       notifications: notifications,
                   });
               } else {
                   clearInterval(timer);
               }
           }, 1000);
       }
   
       render() {
           return (
               <div>
                   {this.state.notifications.map((notification) => {
                       return (
                           <Notification
                               key={notification.id} //추가
                               id={notification.id} //추가
                               message={notification.message} 
                           />
                       );
                   })}
               </div>
           )
       }
   }
   
   export default NotificationList;

   # 로그에 아이디가 함께 나오게 하기 위해 각 알림 객체에 아이디 추가# Notificaton 컴포넌트에 key, id 추가
     - key : 리액트 엘리먼트를 구분하기 위한 고유 값으로 맵 함수 사용 시 필수!
3. Notification.jsx 재 수정
   

   import React from "react";
   
   const styles = {
       wrapper: {
           margin: 8,
           padding: 8,
           display: "flex",
           flexDirection: "row",
           border: "1px solid grey",
           borderRadius: 16,
       },
       messageText: {
           color: "black",
           fontSize: 16,
       },
   };
   
   class Notification extends React.Component {
       constructor(props) {
           super(props);
   
           this.state = {}; // Notification 컴포넌트는 state에 값을 가지고 있지 않다.
       }
   
       componentDidMount() {
           console.log(`${this.props.id}componentDidMoint() called. `); //역따옴표(`) 사용해서 수정
       }
   
       componentDidUpdate() {
           console.log(`${this.props.id}componentDidUpdate() called.`); //역따옴표(`) 사용해서 수정
       }
   
       componentWillUnmount() {
           console.log(`${this.props.id}componentWillUnmount() called.`); //역따옴표(`) 사용해서 수정
       }
   
       render() {
           return (
               <div style={styles.wrapper}>
                   <span style={styles.messageText}>{this.props.message}</span>
               </div>
           )
       }
   }
   
   export default Notification;

   
   
   
4. 결과 이미지 출력)
   

   

   # 콘솔에서 잘 확인되나 3가지 생명주기 함수 중 componentWillUpmount함수 로그가 확인이 안된다.
      그 이유는 모든 컴포넌트가 마운트만 되고 업마운트 되지 않았기 때문이다.
   
   
   
5.  Unmount 로그를 보기 위해 NotificationList 컴포넌트에서 매초 알림하는 부분에
    알림 추가가 모두 끝나면 Notification 배열을 비우도록 수정하기
   

   import React from "react";
   import Notification from "./Notification";
   
   const reservedNotifications = [
       {
           id: 1,
           message: "안녕하세요, 오늘 일정을 안내드립니다.",
       },
       {
           id: 2,
           message: "저녁식사 시간입니다.",
       },
       {
           id: 3,
           message: "이제 곧 미팅이 시작됩니다.",
       },
   ];
   
   var timer;
   
   class NotificationList extends React.Component {
       constructor(props) {
           super(props);
   
           this.state = {
               notifications: [],
           };
       }
   
       componentDidMount() {
           const { notifications } = this.state;
           timer = setInterval(() => {
               if (notifications.length < reservedNotifications.length) {
                   const index = notifications.length;
                   notifications.push(reservedNotifications[index]);
                   this.setState({
                       notifications: notifications,
                   });
               } else {
                   this.setState({ //추가
                       notifications: [],
                   });
                   clearInterval(timer);
               }
           }, 1000);
       }
   
       render() {
           return (
               <div>
                   {this.state.notifications.map((notification) => {
                       return (
                           <Notification
                               key={notification.id}
                               id={notification.id}
                               message={notification.message} 
                           />
                       );
                   })}
               </div>
           )
       }
   }
   
   export default NotificationList;

   
   
   
6. 결과 이미지)
   

   

■ State와 Lifecycle 정의

- State

: React에서 State는 React Component의 상태를 의미한다.

  정상/비정상을 나타내는 상태보단 React의 데이터라는 의미에 더 가깝다.

  즉 React 컴포넌트의 변경 가능한 데이터를 State라 부른다.

  State는 사전에 미리 정해진 것이 아닌 React 컴포넌트를 개발하는 각 개발자가 직접 정의해서 사용

# state가 변경될 경우 컴포넌트가 재 랜더링되기 때문에 랜더링과 데이터 흐름에 관련없는 값을 포함하면

   불필요한 경우에 컴포넌특 다시 랜더링되어 성능을 저하시킬 수 있기 때문이다.

# 랜더링과 데이터 흐름에 관련 있는 값만 state에 포함해야하며, 그렇지 않은 값은

   컴포넌트의 인스턴스 필드로 정의하면 된다.

예제 코드)

# LikeButton이라는 React 클래스 컴포넌트를 나타낸 코드로 모든 클래스 컴포넌트에는

   constructor라는 이름의 함수가 존재하며 우리말로 생성자란 의미를 갖고 있으며 클래스가 생성될 때 실행된다.

# this.state 부분이 현재 컴포넌트의 state를 정의하는 부분이다.

# class 컴포넌트의 경우 state를 생성자에서 정의한다.

# 함수 컴포넌트는 useState라는 hook을 사용해서 정의한다.

# 정의한 state는 정의된 이후 일반적인 자바스크립트 변수를 다루듯 직접 수정할 수 없다.

# 수정은 가능하나 수정해서는 안된다

예제코드)

# 첫 번째 방법은 state를 직접 수정하는 방법

# 두 번째 방법은 setState 함수를 통해 수정하는 방법

※ React에서의 state는 컴포넌트의 랜더링과 관련있기 때문에 마음대로 수정하면

    개발자가 의도한 대로 작동하지 않을 가능성이 있다.

※ 클래스 컴포넌트에서 state를 변경하고자 할 때에는 꼭 setState라는 함수를 사용해야 한다.

React에서 state는 컴포넌트의 동적인 데이터를 관리하고 이 데이터의 변경에 따라 UI를 재 랜더링하기 위해 사용된다.

- state가 중요한 이유

1. 동적 데이터 관리
   state는 컴포넌트의 내부 상태를 나타내며, 시간이 지남에 따라 변할수 있는 데이터를 저장한다.
   예를들어 사용자가 입력한 텍스트. 클락한 버튼의 상태, 서버에서 가져온 데이터 등 관리 가능
2. UI 업데이트
   state가 변경되면 React는 해당 컴포넌트와 자식 컴포넌트를 다시 랜더링하여 UI를 최신 상태로 유지한다.
   이를 통해 사용자는 항상 최신 데이터를 기반으로한 UI를 볼 수 있다.
3. 컴포넌트 간 데이터 전달
   state는 부모 컴포넌트에서 자식 컴포넌트로 props를 통해 데이터를 전달하는데 사용될 수 있다.
   이를 통해 상위 컴포넌트의 상태가 변경되면 해당 상태를 사용하는 하위 컴포넌트도 자동 업데이트 된다.

- Lifecycle

: 라이프사이클은 우리말로 생명주기란 뜻을 가지고 있으며, React 컴포넌트도 이러한 생명주기를 가지고 있다.

# 각 출생 / 인생 / 사망 과정 하단에 초록색으로 표시된 부분은 생명주기에 따라 호출되는
   클래스 컴포넌트의 함수로 라이프사이클 메소드라 부르며, 번역하면 생명주기 함수가 된다.

- 출생 : 해당 과정을 마운트라 부르며, 이때 컴포넌트의 컨스트럭터인 생성자가 실행된다.

             생성자에서는 컴포넌트의 스테이트를 정의하게 된다.

             또한, 컴포넌트가 랜더링되며 이후 컴포넌트 디드 마운트 함수가 호출된다.

- 인생 : React 컴포넌트도 생애 동안 변화를 겪으면서 여러번 랜더링 된다.

             이를 React 컴포넌트로 말하면 업데이트 되는 과정이라 할 수 있다.

             업데이트 과정에서는 컴포넌트의 props가 변경되거나 setState함수 호출에 의해 state가 변경되거나

              falseUpdate라는 강제 업데이트 함수 호출로 인해 컴포넌트가 다시 랜더링 된다.

             그리고 랜더링 이후 componentDid 업데이트 함수가 호출된다.

- 사망 : React 컴포넌트도 언젠가 사라지는 과정을 겪게 되는데 이 과정을 Unmount라 한다.

             상위 컴포넌트가 현재 컴포넌트를 더 이상 화면에 표시하지 않게 될 때 Unmount된다 볼 수 있다.

             이때 Unmount 직전에 componentWillUnmount 함수가 호출된다.

1. chapter_05 폴더 생성
2. Comment.jsx 파일 생성
   

   import React from "react";
   
   function Comment(props) {
       return (
           <div>
               <h1>제가 만든 첫 컴포넌트입니다.</h1>
           </div>
       );
   }
   
   export default Comment;

   
   
   
3. Comment-list.jsx 파일 생성
   

   import React from "react";
   import Comment from "./Comment";
   
   function CommentList(props) {
       return (
           <div>
               <Comment />
           </div>
       );
   }
   
   export default CommentList;

   
   
   
4. 실제 화면에 랜더링하기 위해 index.js 파일 수정
   

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import './index.css';
   // import App from './App';
   import reportWebVitals from './reportWebVitals';
   // import Clock from './chapter04/clock';
   import CommentList from './chapter_05/Comment-list';
   
     const root = ReactDOM.createRoot(document.getElementById('root'));
     root.render(
       <React.StrictMode>
         <CommentList />
       </React.StrictMode>
     );
   
   // If you want to start measuring performance in your app, pass a function
   // to log results (for example: reportWebVitals(console.log))
   // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
   reportWebVitals();

결과 출력)

- Comment 컴포넌트에 스타일 입히기

1. css 스타일 작성을 위해 Comment.jsx 수정
   

   import React from "react";
   
   const styles = {
       wrapper: {
           margin: 8,
           padding: 8,
           dispaly: "flex",
           flexDirection: "row",
           border: "1px solid grey",
           borderRadius: 16,
       },
       imageContainer: {},
       image: {
           width: 50,
           height: 50,
           borderRadius: 25,
       },
       contentContainer: {
           marginLeft: 8,
           display: "flex",
           flexDirection: "column",
           justifyContent: "center",
       },
       nameText: {
           color: "black",
           fontSize: 16,
           fontWeight: "bold",
       },
       commentText: {
           color: "black",
           fontSize: 16,
       },
   };
   
   function Comment(props) {
       return (
           <div style={styles.wrapper}>
               <div style={styles.imageContainer}>
                   <img 
                       src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
                       alt="기본 이미지"
                       style={styles.image}
                   />
               </div>
   
               <div style={styles.contentContainer}>
                   <span style={styles.nameText}>루카스</span>
                   <span style={styles.commentText}>
                       제가 만든 첫 컴포넌트입니다.
                   </span>
               </div>
           </div>
       );
   }
   
   export default Comment;

   
   
   결과 이미지)
   

   

- Comment 컴포넌트에 Props 추가하기

: 커멘트 컴포넌트에 표시되는 작성자 이름과 댓글 내용을 동적으로 변경할 수 있도록 props 추가

1. Comment,jsx 수정
   

   import React from "react";
   
   const styles = {
       wrapper: {
           margin: 8,
           padding: 8,
           dispaly: "flex",
           flexDirection: "row",
           border: "1px solid grey",
           borderRadius: 16,
       },
       imageContainer: {},
       image: {
           width: 50,
           height: 50,
           borderRadius: 25,
       },
       contentContainer: {
           marginLeft: 8,
           display: "flex",
           flexDirection: "column",
           justifyContent: "center",
       },
       nameText: {
           color: "black",
           fontSize: 16,
           fontWeight: "bold",
       },
       commentText: {
           color: "black",
           fontSize: 16,
       },
   };
   
   function Comment(props) {
       return (
           <div style={styles.wrapper}>
               <div style={styles.imageContainer}>
                   <img 
                       src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
                       alt="기본 이미지"
                       style={styles.image}
                   />
               </div>
   
               <div style={styles.contentContainer}>
                   <span style={styles.nameText}>{props.name}</span> //수정
                   <span style={styles.commentText}>{props.comment}</span> //수정
               </div>
           </div>
       );
   }
   
   export default Comment;

   
   
   결과 이미지)
   

   

   # name, comment가 정의되지 않아 undefined 이기 때문에 아무런 값도 나오지 않는다.
   
   
   
2. Comment-list.jsx 수정
   

   import React from "react";
   import Comment from "./Comment";
   
   function CommentList(props) {
       return (
           <div>
               <Comment name={"루카스"} comment={"안녕하세요, 루카스입니다."} /> //수정
           </div>
       );
   }
   
   export default CommentList;

   
   
   결과 이미지)
   
   # 수정 후 커멘트 컴포넌트의 프랍스로 입력한 네임 및 커멘트 값이 전달되어 내용이 표시된다.
   
   
3. Comment-list.jsx 댓글 내용 추가
   

   import React from "react";
   import Comment from "./Comment";
   
   function CommentList(props) {
       return (
           <div>
               <Comment name={"루카스"} comment={"안녕하세요, 루카스입니다."} />
               <Comment name={"리액트"} comment={"열심히 공부하세요~!"} /> //추가
           </div>
       );
   }
   
   export default CommentList;

   
   
   결과 이미지)
   

   

- Comment 데이터를 별도의 갹체로 분리하기

1. Comment-list.jsx 수정
   

   import React from "react";
   import Comment from "./Comment";
   
   const comments = [
       {
           name: "루카스",
           comment: "안녕하세요, 루카스입니다.",       
       },
       {
           name: "리엑트",
           comment: "열심히 공부하세요~!",
       },
       {
           name: "강민경",
           comment: "저도 리액트 배워보고 싶어요!!",
       },
   ];
   
   function CommentList(props) {
       return (
           <div>
              {comments.map((comment) => {
               return (
                   <Comment name={comment.name} comment={comment.comment} />
               )
              })}
           </div>
       );
   }
   
   export default CommentList;

   # JavaScript 배열의 map 함수를 써서 각 댓글 객체에 대해 comment 컴포넌트를 return 하도록 코드를 작성헀다.
   
   
   결과 이미지)
   

   

■ Component 합성과 추출

- Component 합성

: 여러 개의 컴포넌트를 합쳐 하나의 컴포넌트를 만드는 것이다.

  리액트에서는 컴포넌트 안에 다른 컴포넌트를 사용할 수 있기 때문에

  복잡한 화면을 여러개의 컴포넌트로 나눠서 구현이 가능하다.

예제 코드)

# props의 값을 다르게해서 welcome 컴포넌트를 여러번 사용한다.

   이렇게 하면 앱이라는 컴포넌트는 welcome 컴포넌트 3개를 포함하고 있는 컴포넌트가 된다.

   여러개의 컴포넌트를 합쳐서 또 다른 컴포넌트를 만드는 것을 컴포넌트 합성이라 한다.

# 앱 컴포넌트 안에 3개의 웰컴 컴포넌트가 있고 각각의 웹컴 컴포넌트는

   각기 다른 props를 가지고 있다.

# 앱 컴포넌트를 루트로 해서 하위 컴포넌트들이 존재하는 형태가 리액트로만 구성된 앱의 기본적인 구조다.

# 기존에 있던 웹 페이지에 리액트를 연동한다면 루트 노드가 하나가 아닐 수 있기 때문에 위 구조와 다를 수 있다.

- Component 추출

: 컴포넌트 합성과 반대로 복잡한 컴포넌트를 쪼개서 여러개의 컴포넌트로 나눌 수 있다.

  이러한 과정을 컴포넌트 추출이라 한다.

  ※ 큰 컴포넌트에서 일부를 추출하여 새로운 컴포넌트를 만든다는 뜻!

컴포넌트 추출을 잘 활용하면 컴포넌트의 재 사용성이 올라가게 된다.

컴포넌트가 작아질수록 해당 컴포넌트의 기능과 목적이 명확해지고 프랍스도 단순해지기 때문에 재사용성이 높아진다.

예제 코드)

# 위 컴포넌트는 댓글을 표시하기 위한 컴포넌트로

   내부에 작성자의 프로필 이미지와 이름, 댓글 내용과 작성일을 포함하고 있다.

# 해당 컴포넌트의 props는 오른쪽과 같은 형태

# 해당 부분을 추출하여 아바타라는 별도 컴포넌트 생성

아바타 컴포넌트 예제)

# props에 기존에 사용하던 author 대신 좀더 보편적인 의미를 가지고 있는 user 사용

# 보편적인 단어를 사용하는 것은 재사용성 측면을 고려하는 것!

실제 comment 컴포넌트 반영 예제)

# 유저정보 추출하여 별도 컴포넌트 생성

유저 컴포넌트 예제)

# 사용자 정보를 담고 있는 부분을 UserInfo 컴포넌트로 추출

# 아바타 컴포넌트도 해당 컴포넌트에 함께 추출되었다.

comment 컴포넌트 반영 예제)

# 코드가 간결해진 것을 볼 수 있다.

# Comment 컴포넌트가 UserInfo 컴포넌트를 포함하고 있고 UserInfo 컴포넌트는 Avatar 컴포넌트를 포함하고 있다.

# 컴포넌트를 어느정도 수준까지 추출하는 것이 좋은지에 대해 정해진 별도의 기준은 없으며,

   기능 단위로 구분하는 것이 좋고 나중에 곧바로 재사용이 가능한 형태로 추출하는 것이 좋다.

■ Component 만들기 및 랜더링

- Component 만들기

# 리액트 컴포넌트는 크게 클래스 컴포넌트와 함수 컴포넌트로 나뉜다.

- Function Component(함수 컴포넌트)

: 모든 React 컴포넌트는 pure 함수 같은 역할을 해야한다.

  즉 React의 컴포넌트를 일종의 함수라고 생각한다는 뜻

함수 컴포넌트 예제)

# 해당 함수는 하나의 props 객체를 받아 인사말이 담긴 React 엘리먼트를 리턴하여 React 컴포넌트다.

# 함수 컴포넌트는 간단한 코드를 장점으로 가지고 있다.

- Class Component(클래스 컴포넌트)

: 자바스크립트 ES6 class 라는 것을 사용해서 만들어진 형태의 컴포넌트다.

  클래스 컴포넌트는 함수 컴포넌트에 비해 몇 가지 추가적인 기능을 가지고 있다.

클래스 컴포넌트 예제)

# 위 클래스 컴포넌트는 위 welcome 함수 컴포넌트와 동일한역할을 하는 컴포넌트를 클래스 형태로 만들었다.

# 함수 컴포넌트와 차이점은 React의 모든 클래스 컴포넌트는 React.Component를 상속받아 만든다.

상속이란?
객체 지향 프로그래밍에 나오는 개념으로 한 클래스의 변수들과 함수들을 상속 받아 새로운 자식 클래스를 만드는 방법

# 위 코드에선 React.Component를 상속받아 Welcome이라는 클래스를 만들었다.

   React.Component를 상속받았기 때문에 리액트 컴포넌트가 되는 것이다.

- Component의 이름

: 컴포넌트의 이름은 항상 대문자로 시작해야 한다.

# React는 소문자로 시작하는 컴포넌트를 DOM 태그로 익식한다.

# div나 span과 같이 사용하는 것은 내장 컴포넌트라는 것을 뜻하며, div나 span과 같은 문자열 형태로

   react.createElement에 전달된다.

# 대문자로 시작하는 경우에는 react.createElement 형태로 컴파일되며 자바스크립트 파일내에서

   사용자가 정의헀거나 임포트한 컴포넌트를 가르키게 된다.

예제 코드)

# 첫 번째 코드는 DOM 태그를 사용하여 엘리먼트를 만든 코드다.

   DOM 태그들은 div, h1, span 등처럼 모두 소문자로 시작한다.

# 두 번째 코드는 사용자가 정의한 Welcome이라는 컴포넌트를 사용한 엘리먼트다.

   해당 코드에서 컴포넌트명인 Welcome이 소문자로 시작했다면 React는 내부적으로 이것을

   컴포넌트가 아닌 DOM 태그로 인식하게 된다.

※ 컴포넌트의 이름을 소문자로 사용하고 싶다면, 먼저 대문자로 시작하는 변수에 할당한 후 해당 변수를 사용하면 가능!

- Component 랜더링

: 컴포넌트는 붕어빵 틀의 역할을 하기 땜누에 실제로 컴포넌트가 화면에 랜더링 되는 것은 아니다.

  컴포넌트라는 붕어빵 틀을 통해 찍어서 나온 엘리먼트라는 붕어빵들이 실제로 화면에 보이게 된다.

# 랜더링을 하기 위해서는 가장 먼저 컴포넌트로부터 엘리먼트를 만들어야 한다.

예제 코드)

# 위 두줄은 모두 React 엘리먼트를 만들어내게 된다. 이후 해당 엘리먼트를 랜더링하면 끝!

랜더링 코드 예제)

# Welcome 함수 컴포넌트 선언 하였으며, Welcome name="인제"라는 값을 파라미터로 해서 reactDOM.render함수 호출

   이렇게 하면 리액트는 welcome 컴포넌트에 name 인제라는 props를 넣어 호출하고 그 결과로 리액트 엘리먼트 생성

■ Props의 특징 및 사용법

- Props의 특징

1. Read-Only로 즉 읽기 전용이다.
   # 읽을수만 있다는 것은 즉 값을 변경할 수 없다는 말과 동일!
   # props의 값은 React 컴포넌트가 엘리먼트를 생성하기 위해 사용하는 값
   # 붕어빵이 다 구워졌는데 속재료를 바꿀수 없는것과 같은 이치
   
   ※ 다른 props의 값으로 엘리먼트를 생성하기 위해선?
   이 경우 새로운 값을 컴포넌트에 전달하여 새로 엘리먼트를 생성하면 된다.
   이 과정에서 엘리먼트가 다시 랜더링된다!
2. 모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고 같은 Props에 대해서는 항상 같은 결과를 보여줘야 한다.
   React 컴포넌트가 JavaScript의 함수와 같은 개념으로 React 컴포넌트의 입력으로 들어오는 props는
   자바스크립트 함수의 파라미터와 같다.
   
   ※ React 컴포넌트 관점에서 같은 props에 대해서 항상 같은 결과를 보여줘야 한다. 결과는 React 엘리먼트!
       React 컴포넌트의 props는 바꿀 수 없고, 같은 props가 들어오면 항상 같은 엘리먼트를 리턴해야 한다.

■ JavaScript 함수의 속성

# 위 함수에서는 a와 b라는 파라미터 값을 변경하지 않고 있다.

   a와 b라는 파라미터 집합의 값이 같은 경우에는 항상 같은 값을 리턴할 것이고 이를 pure(순수) 하다라 한다.

   이는 입력값(input)을 변경하지 않으며, 같은 입력값에 대해서는 항상 같은 출력값(output)을 리턴한다는 의미

# account와 amount라는 파라미터를 받아 account의 total이라는 값에서 amount를 빼는 함수다.

   계좌에서 출금하는 함수로 은행 계좌 정보와 총액을 파라미터로 받아 계좌의 현채 총 잔액을 나타내는 토탈에서

   출금할 금액인 amount를 빼는 것이다.

   위 함수는 입력으로 받은 파라미터 account의 값을 변경했다. 이 경우 impure(순수하지 않다)하다라 한다. 

■ Props 사용법

: props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체

- props라는 객체를 전달하기 위해서는?

# JSX를 사용하는 경우 위 코드와 같이 키와 값으로 이루어진 키값상의 형태로 props를 넣을 수 있다.

# 이 코드에는 app 컴포넌트가 나오고 그 안에서 profile 컴포넌트를 사용하고 있다.

   profile 컴포넌트에 name, introduction, viewCount라는 3가지 속성이 있는데 차이는 {} 중괄호 사용 여부다.
   props에 값을 넣을 때에도 문자열 이외에 정수, 변수, 그리고 다른 컴포넌트 등이 들어갈 때 중괄호를 사용해야 한다.

이렇게 하면 이 속성의 값들이 모두 프로필 컴포넌트의 props로 전달되며

props는 아래와 같은 형태의 자바스크립트 객체가 된다.

# 레이아웃 컴포넌트의 props로는 정수값을 가진 width, height과 react 엘리먼트로 header, footer가 들어온다.

# jsx를 사용하는 경우에는 간단하게 컴포넌트에 props를 넣을 수 있다.

- JSX 코드를 사용하지 않고 작성하면?

# createElement 함수를 사용하여

  - type : 컴포넌트 이름인 profile

  - props : name, introduction, viewCount

  - children : 내용이 없어 null 압력

■ React Components와 Props 정의

Component
# 리액트는 컴포넌트 기반 구조이다.
# 모든 페이지가 컴포넌트로 구성되어 있으며, 하나의 컴포넌트는 또 다른 여러개의 컴포넌트 조합으로 구성될 수 있다.

# A와 B로 표시된 부분이 리액트 컴포넌트라 볼 수 있다.

  이러한 컴포넌트를 여러번 반복적으로 사용해서 하나의 페이지를 구성하고 있다.

# React를 컴포넌트 기반이라고 부르는 것은 작은 컴포넌트들이 모여 하나의 컴포넌트를 구성하고

   이러한 컴포넌트들이 모여 전체 페이지를 구성하기 때문이다.

# 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄이고 개발시간 및 유지보수 비용도 줄일 수 있다.

# 리액트 컴포넌트는 개념적으로 자바스크립트 함수와 비슷하다.

   함수가 입력을 받아 출력을 내뱉는 것처럼 리액트 컴포넌트도 입력을 받아 정해진 출력을 내뱉는다.
   ※ 리액트 컴포넌트를 하나의 함수라 생각하면 쉽게 개념을 이해할 수 있다.

# 리액트 컴포넌트의 입/출력은 일반적인 자바스크립트 함수와 조금 다르다.

   리액트 컴포넌트에서의 입력은 props라는 것이고 출력은 리액트 엘리먼트가 된다.

※ 리액트 컴포넌트가 해주는 역할은 어떠한 속성들을 입력으로 받아 그에 맞는

    리액트 엘리먼트를 생성하여 리턴해주는 것이다.

    - 리엑트 엘리먼트는 리액트 앱을 구성하는 가장 작은 빌딩 블록들

# 리액트 컴포넌트는 만들고자 하는 대로 props, 즉 속성을 넣으면 해당 속성에 맞춰

   화면에 나타날 엘리먼트를 만들어 준다.

■ Props

Props(prop 뒤에 s를 붙여 복수형을 나타낸다.)
프랍은 property(재산, 속성, 특성)라는 영어 단어를 줄여서 쓴 것이며, 리액트에선 속성이란 뜻으로 사용된다.
※ 즉, Props는 리액트 컴포넌트의 속성!

# 위 그림에서 Props는 붕어빵에 들어가는 재료를 의미

# props는 React 컴포넌트에서 눈에 보이는 글자나 색깔 등의 속성을 바꾸고 싶을 때 사용하는 컴포넌트 속 재료

# 컨포넌트의 모습과 속성을 결정하는 것이 props이다.

# props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체다.

# 컴포넌트의 어떤 데이터를 전달하고 전달된 데이터에 따라 다른 모습의 엘리먼트를

   화면에 랜더링하고 싶을 때 해당 데이터를 props에 넣어 전달

1. chapter04 폴더 생성
2. clock.jsx 파일 생성
   

   import React from "react";
   
   function Clock(props) {
       return (
           <div>
               <h1>안녕, 리엑트!</h1>
               <h2>현재 시간 : {new Date().toLocaleTimeString()}</h2>
           </div>
       )
   }
   
   export default Clock;

   
   
   
3. index.js 파일 수정
   

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import './index.css';
   // import App from './App';
   import reportWebVitals from './reportWebVitals';
   import Clock from './chapter04/clock';
   
   setInterval(() => {
     const root = ReactDOM.createRoot(document.getElementById('root'));
     root.render(
       <React.StrictMode>
         <Clock />
       </React.StrictMode>
     );
   }, 1000);
   
   // If you want to start measuring performance in your app, pass a function
   // to log results (for example: reportWebVitals(console.log))
   // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
   reportWebVitals();

   # setInterval 함수를 사용해서 1000ms 마다 새롭게 Clock 컴포넌트를 root.div에 랜더링하도록 만들었다.
   # 위 코드로 하면 매초 Clock 컴포넌트의 엘리먼트가 새롭게 생성된다.

- 결과 화면

# 크롬 개발자 도구를 열어 엘리먼트 탭에서 루트 DIV를 살펴보면 매초 시간이 바뀌면서 변경된 부분이 깜빡인다.

# 강의처럼 h2 태그의 시간 확인이 불가하다.. 매 초마다 열어둔 태그가 닫힘..