[React] 스파르타코딩 내일배움캠프 React 입문 내용 정리

React란?

SPA란?

• Single Page Application
• 서버에서 HTML 페이지들을 일일이 다운로드하는 것이 아니라, 하나의 마크업(markup) HTML 파일을 받아 클라이언트에서 데이터를 직접 로딩해 동적으로 화면을 표시
• 사용자가 페이지를 다시 로딩할 필요가 없어진다.

 

Virtual DOM

• DOM (Document Object Model) : HTML 마크업 구조를 자바스크립트로 조작이 가능한 객체 형태로 모델링한 것
• 어떤 DOM 요소를 변경하게 되면 브라우저는 새롭게 변경된 DOM을 토대로 새로운 화면을 그린다.
• DOM 요소의 변화
  • 레이아웃 단계 : DOM 요소의 변화 이후 요소들의 위치를 계산
  • 페인트 단계 : 새로운 화면을 다시 그리는 단계
• Virtual Dom : 실제로 랜더링 되지는 않았지만, 실제 DOM 구조를 반영한 상태로 메모리에 있는 가상의 DOM
• 가상 돔의 변화를 실제 DOM에 적용하지 않는 한 아무리 많은 조작이 일어나도 브라욷저의 렌더링을 일으키지 않는다.
• 가상 돔은 변경 사항들을 한 번에 묶어서 실제 DOM에 반영을 한다 = batching

 

React.js

• 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
• SPA를 전제로 하고 있으며, Virtual DOM을 활용하여 업데이트 해아하는 DOM 요소들을 찾아서 해당 부분만 업데이트한다
• 리렌더링이 잦은 동적인 모던 웹에서 향상된 퍼포먼스를 낼 수 있다.

 

 

 

 

Component

• 화면을 구성하는 하나의 단위
• 컴포넌트(블럭)는 즉 함수 ⇒ html을 return 하는 함수를 만들면 된다
• 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 한다
• 폴더는 소문자로 시작하는 카멜케이스로 작성, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓는다
• 렌더링 : 화면에 보여지게 하는 행위

// 컴포넌트 밖, 내가 필요한 파일을 가져오는 영역
import React from 'react';

const App = () => {
	// 자바스크립트를 쓸 수 있는 영역

	return (
		{/* JSX를 쓸 수 있는 영역 */}
	);
};

// 내가 만든 컴포넌트를 밖으로 내보내는 영역
export default App;

 

부모와 자식 관계에 놓인 컴포넌트

• 컴포넌트는 다른 컴포넌트를 품을 수 있다
• 부모 컴포넌트 : 다른 컴포넌트를 품는 컴포넌트
• 자식 컴포넌트 : 다른 컴포넌트 안에서 품어지는 컴포넌트
• Rendering : 화면에 보여지게 하다
• JSX : 함수로 만들어진 컴포넌트를 html 태그를 사용하듯이 코드를 작성하는 방식

 

 

 

 

 

JSX 문법

• 리액트에서는 딱 하나의 html 파일만 존재
• JSX = HTML을 품은 JS
• JSX 문법을 사용해서 React 요소를 만들고 DOM에 rendering 시킨다
• HTML 태그는 .js 파일 안에서 쓸 수 없다
• 자바스크립트 안에서 html 태그 같은 마크업을 넣어 UI 작업을 편하게 할 수 있다

---

1. 태그는 꼭 닫아주기
2. 무조건 1개의 element를 반환하기 (여러 element X)
3. JSX에서 JavaScript 값을 가져오려면 중괄호 { } 를 쓴다.
4. class 대신 className
   • 클래스명을 정해줄 땐 속성 값을 className으로 사용한다
   • id는 동일하게 id
5. 인라인으로 style 주기
   • css 문법 대신 json 형식으로 넣어주면 된다

 

 

 

 

 

Props

• 부모 컴포넌트로부터 받아온 데이터
• 부모 컴포넌트가 자식에게 넘겨준 데이터들의 묶음
• 컴포넌트 간의 정보를 교류할 때 사용한다

import React from "react";

// div안에서 { } 를 쓰고 props.motherName을 넣어보세요.
function Child(props) {
  return <div>{props.motherName}</div>;
}

function Mother() {
  const name = "홍부인";
  return <Child motherName={name} />;
}

function GrandFather() {
  return <Mother />;
}

function App() {
  return <GrandFather />;
}

export default App;

⇒ motherName이라는 이름으로 name 값을 Child 컴포넌트에게 전달해준것 = Props로 정보를 전달했다

• object literal 형태이기 때문에 {props.motherName}로 꺼내서 사용할 수 있다.
• Child로 보내줄 때 motherName={name}으로 보내주었기 떄문에 key가 motherName이다.
• 자식 → 부모 컴포넌트로 props 전달 불가능

 

부모 컴포넌트로 정보를 전달하는 children

• 자식 컴포넌트에 정보를 전달해주어도 사용할 수 있는 props ⇒ children
• Layout 컴포넌트를 만들 때 주로 사용

 

구조분해 할당과 Props

• props는 object literal 형태의 데이터이므로 구조 분해 할당을 이용할 수 있다.
• 구조 분해 할당 : 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식

 

defaultProps

• 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기값
• 자주 받거나 또는 무조건 받아야 하는 props들이 있다.

import React from 'react';

function Child({ name }){
	return <div>내 이름은 {name} 입니다. </div>
}

export default Child

Child 컴포넌트 입장에서는 부모 컴포넌트에서 name을 props 정보를 받기 전까지는 name 이 없는 상태 ⇒ 자식 컴포넌트는 name이 무엇인지 알 수가 없다

부모 컴포넌트에서 임시로 사용할 수 있는 props를 설정할 수 있다. = defaultProps

⇒ 부모 컴포넌트에서 name props가 오게 되면 설정된 defaultProps는 사라지고 내려 받은 props로 값이 바뀌게 된다.

 

 

 

 

State

• 컴포넌트 내부에서 바뀔 수 있는 값
• state를 만들 떄는 useState()를 사용한다
• useState는 state를 만들어주는 리액트에서 제공하는 기능
• 훅(Hook) : 리액트에만 존재하는 개념이자 기능
• state를 변경할 때는 setValue(바꾸고 싶은 값)을 사용한다

// useState 훅을 사용하는 방식
const [ value, setValue ] = useState( 초기값 )

• setName을 통해서 바꾼 값은 어디에 저장되는 것이 아니기 때문에 브라우저를 새로고침하면 다시 초기값으로 바뀐다.
• 단순히 화면에서만 바뀐 값으로 렌더링이 되기 때문

 

useState + onClick Event

• 이벤트 핸들러 : 버튼을 눌렀을 때 하고 싶은 행동을 함수로 만든것
• onClickHandler라는 함수를 만들고 onClick={ }를 넣어주면서 함수와 컴포넌트(button 태그)를 연결시킨다.

import React, { useState } from "react";

function App() {
  const [name, setName] = useState("길동이");

  function onClickHandler() {
    setName("누렁이");
  }

  return (
    <div>
      {name}
      <button onClick={onClickHandler}>버튼</button>
    </div>
  );
}

export default App;

 

useState + onClick Event

• 화살표 함수, function 키워드 모두 똑같이 함수 컴포넌트를 만들 수 있다.
• input 에서는 보통 사용자가 입력한 값을 staet로 관리하는 패턴을 많이 사용한다.

import React, { useState } from "react";

const App = () => {
  const [value, setValue] = useState("");

  const onChangeHandler = (event) => {
    const inputValue = event.target.value;
    setValue(inputValue);
  };

	console.log(value) 

  return (
    <div>
      <input type="text" onChange={onChangeHandler} value={value} />
    </div>
  );
};

export default App;

⇒ 사용자가 입력한 input의 값은 event.target.value로 꺼내 사용할 수 있다.

⇒ 사용자가 input에 어떤 값을 입력하면, 그 값을 입력할 때마다, 같은 말로 onChange될 때마다 value라는 state에 setValue해서 넣어주는 것

• 이벤트 핸들러 안에서 자바스크립트의 event 객체를 꺼내 사용할 수 있다.
• 사용자의 input 값을 state로 관리할 수 있다는 의미

 

불변성

• 메모리에 있는 값을 변경할 수 없는 것
• 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성이 없다
• 리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 않고, 직접 수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없게 되는것 → 개발자가 값은 바꿨지만 리액트는 state가 변했다고 인지하지 못하게 된다
• 리액트에서는 데이터의 불변성르 지켜주는 게 중요하다

 

 

 

 

 

컴포넌트와 렌더링

컴포넌트

• 컴포넌트는 리액트의 핵심 블록 중 하나이다.
• 리액트에서 개발한 모든 어플리케이션은 컴포넌트라는 조각으로 구성된다.
• 컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어준다.
• 리액트 컴포넌트 = 선언체
  • 선언체: 무엇(What)을 중요시 여겨 제어의 흐름보다는 원하는 목적을 중요시 여기는 형태
  • 명령형: 어떻게(How)를 중요시 여겨서 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태

 

렌더링

• 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요창하는 작업

---

(예시)

컴포넌트 = 주방장 / 리액트 = 손님에게 서빙하는 웨이터 / UI = 음식

출처: 입문 강의 강의자료

1. triggering (렌더링 일으키기) = UI를 주문하고 주방으로 전달하는 것
   1. 첫 리액트 앱을 실행했을 떄
   2. 현재 리액트 내부에서 어떤 상태(state)에 변경이 발생했을 떄
      1. 컴포넌트 내부 state가 변경되었을 때
      2. 컴포넌트에 새로운 props가 들어올 때
      3. 상위 부모 컴포넌트에서 위의 두 이유로 렌더링이 발생 했을 때
   ⇒ 리액트 앱이 실행되고 첫 렌더링이 일어나면 리액트는 컴포넌트의 루트에서 시작하여 아래쪽으로 쭉 훑으며 컴포넌트가 반환하는 JSX 결과물을 DOM에 반영합니다
2. rendering (렌더링한다) = 주방에서 컴포넌트가 UI를 만들고 준비하는 것
   • 첫 렌더링이 끝난 이후 추가로 렌더링 트리거 하려면 상태를 변경해 주면 된다
   • 상태에 변화가 생기면 리렌더링이 발생
   • 여러 상태가 변경됐다면 리액트는 이를 큐 자료구조에 넣어 순서를 관리한다.
     1. 새로운 주문(리렌더링)이 일어나면 리액트가 변경된 내용을 컴포넌트에 전달
     2. 컴포넌트는 새롭게 UI를 만든다
     3. 새로운 렌더링 결과는 리액트에 의해 DOM에 반영된다 (commit phase)
3. commit (렌더링 결과를 실제 DOM에 커밋) = 리액트가 준비된 UI를 손님 테이블에 올려놓는 것

 

브라우저 렌더링

• 브라우저 렌더링과 리액트의 렌더링은 다른 독립적인 프로세스다
• 렌더링이 완료되고 React가 DOM을 업데이트한 후 브라우저는 화면을 그린다. = 브랄우저 렌더링 (페인팅)

 

 

 

 

 

컴포넌트 스타일링

컴포넌트 파일 안에서 CSS 코드 작성하기

• 컴포넌트 파일 안에서는 자바스크립트 객체로 작성했기 때문에 CSS 프로퍼티 값을 따옴표(””)로 감싸줘야 한다

컴포넌트 파일에서 CSS 분리하기

• css 파일을 반드시 import 해줘야 한다
• CSS 문법에서는 따옴표를 다 지워줘야 한다 (원래의 CSS 문법)

 

 

 

 

 

컴포넌트 분리하기

• 하나의 폴더 안에 모든 컴포넌트를 만들어서 관리하면 시간이 흐를수록 컴포넌트가 많아져서 원하는 컴포넌트를 찾기 힘들다
• 연관된 컴포넌트끼리 폴더를 만들어서 관리하는 것이 훨씬 수월하다
• 일반적으로 여러 번 렌더링하여 기능을 재사용하는 컴포넌트들은 따로 분리해서 사용한다.

 

 

 

 

 

리액트 배포하기 (Vercel)

1. 깃허브 레포지토리 생성 및 remote 등록
2. Vercel 홈페이지 접속
   • 깃허브 아이디로 로그인
   • Import Git Repository ☞ 생성되어 있는 repository import 하기
   • Deploy 버튼 클릭
   • STATUS가 ready라면 배포 완료
3. 수정사항을 반영하는 방법
   • 코드를 수정한 뒤 commit과 push를 하면 자동으로 재배포

 

 

 

 

---

내일배움캠프에서 제공된 리액트 입문 강의 정리본이다.

예제를 같이 풀면서 진행했는데, 그 코드는 넣지 않고 노션에 어제 정리해놓은 걸 글로 작성해본 것이다.

 

아무래도 리액트가 처음이라 나머지 공부를 더 해야 할 것 같다.