#01 처음 만난 리액트

송민혁·2022년 9월 4일

FirstMetReact

목록 보기

1/2

Intro

리액트란 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리이다.

리액트의 장단점

리액트의 장점은 첫 번째로는 빠른 업데이트와 렌더링 속도를 손꼽을 수 있다.
여기서 빠른 업데이트를 위하여 Virtual DOM이 필요하다.
Virtual DOM은 UI 가상 표현을 메모리상에 두고 재조정 과정을 통해 실제 DOM과 동기화하는 것을 말하낟. 재조정 과정은 크게 3단계로 구성된다.

UI가 변경되면 전체 UI를 Virtual DOM으로 렌더링한다.

현재 Virtual DOM과 previous Virtual DOM을 비교해 차이를 계산한다.
(Diff : 두 개의 파일 간 차이에 대한 정보를 출력하고 비교하는 과정)

변경된 부분을 실제 DOM에 반영한다.
(Patch: 일부 파일이나 소스코드 등을 변경해 수정하는 작업)

두 번째 리액트의 장점로는 컴포넌트를 보면 알 수 있습니다. 컴포넌트를 사용하면 재사용성 (Reusability) 이 뛰어납니다. 코드를 짤 때도 재사용성을 계속 고려해야 합니다. 이 말은 다른 소프트웨어에서도 쓸 수 있어야 한다는 말입니다. 재사용성을 고려해서 만든다면, 개발 시간이 단축되며 유지 보수가 용이합니다.

이제 장점을 알았으니 단점을 알아보자면, 방대한 학습량이 발목을 잡을 것이고 계속 라이브러리가 버전업그레이드가 되므로 이에 대한 내용에 대해 학습을 하여야 합니다. 이건 항상 개발자의 숙명이라고 생각합니다.
그리고 또 다른 단점으로는 높은 상태관리 복잡도입니다. 그래서 Redux가 필요합니다.

리액트 시작하기

Node.js, npm, VS code를 준비하고, 터미널에 npx(npx - execute npm package binaries)를 이용합니다.

npx create-react-app ProjectName

프로젝트가 생성되면 어플리케이션을 실행할 수 있는 명령어를 알려줍니다.

명령어 모음

cd my-project (change directory)

npm start (애플리케이션 실행)

JSX

JSX란? A syntax extension to Javascript (Javascript + XML / HTML)라는 의미를 가지고 있습니다.

const element = <h1>Hello world!</h1>;

JSX 역할

JSX를 사용하면 간결한 코드를 사용할 수 있으며, 가독성이 좋다.
가독성이 높으면 버그를 발견하기 쉬우므로 유지보수가 용이하다.

<div>Hello World!</div> /// JSX 사용한 경우

React.createElement('div', null, `hello &{name}`); // JSX 사용 안 한 경우

JSX 사용법

JS의 모든 문법을 지원한다. 중괄호를 사용하면 자바스크립트를 사용한다고 생각하면 된다.

JSX 사용법
...HTML
{Javascript 코드}
...HTML

<h1>Hello {formatName(user)}!</h1>;

자꾸 내가 실수하는 부분

Rendering Elements

React Element

Element란 웹을 구성하는 가장 작은 블록들을 의미한다. 즉, Elements는 화면에서 보이는 것들을 기술한다.

Element는 브라우저 DOM 엘리먼트와 리액트 엘리먼트가 있습니다. 리액트 엘리먼트는 Virtual DOM에 있고 type과 props를 갖는 React의 객체이며, React.createElement를 통해 생성된다.

React Element는 immutable합니다. (불변성)
즉, Elements 생성 후에는 children이나 attributes를 바꿀 수 없습니다.
Component & Elements

Rendering React Element

Root DOM Node

<div id="root"></div>

ReactDOM.render()를 이용하면 된다고 강의를 들었지만, 좀처럼 쉽게 렌더링이 되지 않았다. 그래서 구글링을 통해 찾아보니 ReactDOM대신 createRoot를 import해서 사용하니 화면에 잘 출력되었다.
({createRoot}, root.render())

import React from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import Clock from "./chapter_04/Clock";

const root = createRoot(document.getElementById('root'));

setInterval(() => {
  root.render(
    <React.StrictMode>
      <Clock />
    </React.StrictMode>,
    document.getElementById('root')
  );
}, 1000);

reportWebVitals();

Components & Props

리액트에서 가장 중요한 파트이다.

Component

리액트는 컴포넌트들로 구성되어 있다. 컴포넌트의 입력은 props으로 하고 출력은 React element로 합니다. 그래서 다음 이미지와 같은 과정을 거칩니다.

컴포넌트은 함수 컴포넌트와 클래스 컴포넌트로 크게 두 가지로 분류합니다.
함수 컴포넌트가 사용하기 수월하기 때문에 주로 사용되고 이걸 개선된 것이 바로 훅(Hook)입니다.

Component Naming

우리가 주의할 점이 있다. 컴포넌트의 이름은 항상 대문자로 시작해야 한다.

const element = <div />; // HTML div 태그로 인식

const element = <Welcome name="민혁" />; // Welcome을 Component로 인식

Component 렌더링

function Welcome(props) {
  return <h1>안녕, {props.name}</h1>;
}

const element = <Welcome name="민혁" />;

root.render(
    element,
    document.getElementById('root')
  );

컴포넌트 안에 컴포넌트를 생성할 수 있다. (합성 컴포넌트)

컴포넌트 추출

큰 컴포넌트를 쪼개서 사용할 수 있다. 이것을 컴포넌트 추출이라고 한다.
추출함으로써 재사용성을 높일 수 있습니다. 주로 기능 단위로 쪼갰을 때가 효율이 좋다.

Props

입력에 해당하는 props는속성(Property)을 의미합니다. 다른 말로 표현하자면, props는 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체입니다. props의 값에 따라 컴포넌트의 디테일
(사진, 컬러, 제목...)이 달라집니다.

props는 단방향이며 읽기전용입니다. 즉, 값을 변경할 수 없습니다. 마치 붕어빵이 다 구워졌는데, 속재료를 바꿀 수 없다는 비유를 들었습니다. 그렇다면 바꾸고 싶다면 어떻게 할까요? 새로운 값을 컴포넌트에 전달하여 새로운 Element를 만들어야 합니다.

모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여줄 것이다.

props 사용법

props 사용방법은 <컴포넌트이름 props이름 = “값”> 이렇게 상위 컴포넌트에서 HTML의 attribute를 정의하듯이 하위 컴포넌트의 속성처럼 사용하면 된다.

댓글 컴포넌트 만들기

import React from "react";


const styles = {
  wrraper: {
    margin:8,
    padding: 8,
    display: "flex",
    flexDirection: "row",
    border: "1px solid grey",
    borderRadius: 16,
  }, 
  imageContainer: {},
  image: {
    width: 58,
    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.wrraper}>
      <div style={styles.imageContainer}>
        <img
          src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png"
          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 추가하기

 	<span style={styles.nameText}>{props.name}</span>
    <span style={styles.commentText}>{props.comment}</span>


//CommentList.jsx에 들어가서
function CommentList(props) {
  return (
    <div>
      <Comment name={"송민혁"} comment={"안녕 리액트!"}/>
    </div>
  );
}