Hyun's Wonderwall

[React] 처음 만난 리액트 - 0~7강 본문

Study/Web

[React] 처음 만난 리액트 - 0~7강

Hyun_! 2025. 6. 30. 03:54

소플 <처음 만난 리액트> 강의 내용 정리

강의 링크: https://www.frontoverflow.com/courses/%EC%B2%98%EC%9D%8C-%EB%A7%8C%EB%82%9C-%EB%A6%AC%EC%95%A1%ED%8A%B8-xWku7JUXdk_iN8zUCBqZM

 

0강. 준비하기

HTML과 CSS

HTML(HyperText Markup Language): 웹사이트의 뼈대를 만들기 위해 사용하는 마크업 언어

 

Tag로 구조를 만든다.

  • ex. <html>로 열고, </html>로 닫는다.
  • HTML4: <br> / HTML5: <br>선호, <br/> 및 <br /> 사용 가능
  • 태그는 열었으면 꼭 닫아줘야 한다

웹사이트의 뼈대를 구성하는 태그들

  • <html>: html의 시작과 끝을 표시하는 태그
  • <head>: 머리 태그 (웹사이트의 속성이 들어감. 메타데이터. 어떤 웹사이트인지 - 제목, 설명 등. / title: 제목 태그)
  • <body>: 몸통 태그 (실제 웹사이트의 콘텐츠가 들어감)

버튼 조작 등에 따라 브라우저에 나오는 내용이 바뀌는 것은 어떻게? -> body 태그 안의 내용이 바뀌는 것. 페이지별로 html 파일이 따로 존재하며 페이지를 이동하게 될 경우 브라우저에서 가져와서 표시한다.


페이지 어떻게 관리? -> SPA가 나오게 됨.

SPA(Single Page Application): 하나의 페이지만 존재하는 웹사이트(웹 애플리케이션)

 

전통적인 방식: Multi Page Application. 사용자가 페이지를 요청할 때마다 새로운 페이지 로딩. 각 페이지는 각자의 HTML 파일을 가짐.
현대적인 방식: Single Page Application. 단 하나의 페이지만 존재(HTML 파일이 하나)
처음에는 Body 태그 내부가 텅 비어있다가, 해당 페이지에 접속할 때, 그 페이지에 해당하는 컨텐츠를 가져와서 동적으로 접속하면 동적으로 body 태그 내부를 채워넣음. (React가 여기에 채워넣는 역할을 한다.)

 

CSS(Cascading Style Sheets): 웹사이트의 레이아웃, 글꼴, 색상 등의 디자인을 입힘.

HTML 동일해도 CSS 다르면 완전 다른 디자인이 됨

JavaScript 소개 및 자료형

JavaScript: 프로그래밍 언어의 한 종류. 웹사이트에서 동적인 처리 위해 사용. ECMAScript: JS의 정식명칭.

- 스크립트 언어 -> 런타임에 해석되고, 실행됨

- ES6 (ECMAScript 2015)

 

자료형(Data Type)

- JS는 Dynamic Typing(동적 타이핑): 실행 시점에 자료형이 결정

- var, let (되도록 let)

- undefined: 값이 아직 정의되지 않음

- null: 값이 정의되었는데, null임

- array: 배열. 다양한 자료형의 변수 함께 들어갈 수 있음 (각 원소는 인덱스값 가짐)

 

object 타입: 객체를 다루기 위한 자료형 (key와 value로 이루어진 쌍의 집합. map, dict와 비슷)

JavaScript의 연산자

대입 연산자(Assignment Operator): =

산술 연산자: + - * / % **

산술 대입 연산자: += -= *= /=

증감 연산자: ++ -- (postfix 후위 / prefix 전위)

관계 연산자 (비교 연산자): < > <= >=

동등 연산자: == !=

일치 연산자(값과 자료형이 모두 같은지/다른지를 검사): === !==

이진 논리 연산자: && ||

조건부 연산자(삼항 연산자 ternary operator): 조건식 ? true일 경우 : false일 경우

Javascript의 함수

함수의 입력

parameter, arguments

 

function statement와

arrow function expression가 있다

(실습) 개발 환경 설정하기

Node.js: JS로 네트워크 애플리케이션 개발할 수 있게 해주는 환경

npm: node package manager (Node.js를 위한 패키지 매니저 -> 프로젝트에서 필요로 하는 다양한 외부 패키지 버전과 의존성 관리. 편하게 설치 및 삭제. Node.js 설치 시 자동 설치됨)

VS Code IDE 사용

1강. 리액트 소개

React는 무엇인가?

웹 및 사용자 인터페이스를 만들기 위한 JS 라이브러리 (Meta에서 개발)

사용자 인터페이스(UI): 사용자와 컴퓨터 프로그램 서로 상호작용하기 위해 중간에서 입출력 제어 (버튼, 입력칸 등)

UI 라이브러리를 사용해 화면을 만들 수 있음 (ex. Angular 프레임워크, React 라이브러리, Vue 프레임워크)

 

프레임워크 vs 라이브러리 - 차이점: 프로그램의 흐름에 대한 제어 권한

프레임워크: 프로그램 흐름 제어 권한이 프레임워크에 있음. 개발자가 프레임워크 구조에 맞춰 코드를 짜야 함.

라이브러리: 프로그램 흐름 제어 권한이 개발자에게 있음. 개발자가 필요할 때 호출. 

+) 왜 React는 라이브러리? - React는 UI 구성만 담당. 라우팅, 상태 관리 등은 개발자가 선택한 도구로 구성 => 유연성, 확장성 확보.

 

 

리액트의 장점과 단점

리액트의 장점

- 업데이트, 렌더링 속도가 빠르다

 

Virtual DOM: 가상의 DOM. 웹페이지와 실제 DOM 사이에서 중간 매개체 역할.

  - DOM(Document Object Model): 웹페이지를 정의하는 하나의 객체. 한 웹사이트에 대한 정보를 모두 담고 있음.

 

  화면 업데이트 = DOM을 수정

  기존 방식: DOM에서 변경할 부분을 직접 찾고 수정해야

  Virtual DOM: 업데이트해야 할 최소한의 부분을 검색, 수정 (State Change -> Compute Diff -> Re-render)

  => React는 Virtual DOM 덕분에 업데이트 속도가 빠르다


Component-Based (컴포넌트 기반 구조)

컴포넌트의 조합으로 구성 -> 재사용성(Reusability) 높다

다른 모듈의 의존성 낮추어야 독립적으로 재사용 가능 -> 개발 시 이 점도 고려해야 함

재사용성 높을 시 장점: 개발 기간 단축, 유지 보수 용이

React 컴포넌트는 항상 재사용성이 높게 개발되어야 한다

 

 

리액트의 단점

- 방대한 학습량

- 계속 뭔가 바뀜 (버전업 -> 새로운 내용이 등장)

- 높은 상태관리 복잡도 (-> 외부 상태관리 라이브러리를 사용하는 경우가 많음)

2강. 리액트 시작하기

(실습) 직접 리액트 연동하기

아는 내용이라 강의만 시청

- HTML만으로 간단한 웹사이트 만들기

- CSS를 사용하여 웹사이트 스타일링하기

  - <link rel="stylecheet" href="styles.css">: 링크에 스타일을 적용

 

웹사이트에 React.js 추가하기

DOM Container 추가해야 함 (= Root DOM Node. Virtual DOM의 시작점.) 

<div id="root"></div> (-> DOM Container로 사용됨)

script 태그를 사용해서 React의 JS 파일들을 가져올 수 있음

react, react-dom, MyButton

React 컴포넌트 'MyButton'을 작성한 코드 (클릭 시 텍스트가 바뀌는 버튼)

마지막 두 줄: React 컴포넌트를 DOM 컨테이너에 렌더링 -> 화면에 보이게 됨

(실습) create-react-app

리액트로 웹사이트를 개발할 때 이를 이용해서 프로젝트를 생성

npx(Node Package eXecute): npm 패키지 실행도구. npm package runner. 패키지를 로컬에 저장하지 않고 매번 최신 버전의 파일만을 임시로 불러와 설치하고 실행시킨 후 설치 파일을 삭제한다.

 

npx create-react-app <your-project-name>
cd <your-project-name>
npm start

 

localhost:3000에서 접속해 실행중인 웹사이트 확인 가능

 

3강. JSX

JSX의 정의와 역할

JSX: a syntax extension to JavaScript (JavaScript의 확장 문법)

= JS + XML/HTML

JSX의 역할

- 내부적으로 XML/HTML 코드를 JS로 변환 (React.createElement)

 

JSX의 장점 및 사용법

JSX 장점

- 간결한 코드, 가독성 향상, 버그 발견 쉬움

- Injection attack 방어 (XSS: cross site scripting 공격 방어)

 

JSX 사용법

- JS 변수나 함수 호출 값 삽입: XML/HTML 사이에 {} 중괄호 쓰고 

- 태그의 속성에 값 넣기: "" 사이에 문자열 넣거나 {} 사이에 JS 코드 삽입

 

- 자식(Children) 정의: HTML 작성할 때처럼 상위 태그가 하위 태그를 둘러싸게

(실습)  JSX 코드 

Book.jsx, Library.jsx 파일들 작성

3개의 Book 컴포넌트를 렌더링함

 

index.js에서 ReactDOM.render() 에 <Library / >: Root DOM Node에 렌더링

4강. Rendering Elements

Elements의 정의와 생김새

Elements: React app을 구성하는 가장 작은 블록들. 화면에서 보이는 것들을 기술.

웹브라우저 검사 탭 > Elements는 DOM Elements.

React Elements는 DOM Elements의 가상 표현.

React는 create element해서 화면에서 보이는 실제 DOM Elements를 만듬

리액트 Elements는 자바스크립트 객체 형태로 존재 (불변)

 

컴포넌트 렌더링을 위해 모든 컴포넌트는 create element를 통해 element로 변환된다 (type이 React 컴포넌트였던 것들이 다 type이 html 태그 되도록 변환)


Elements의 특징 및 렌더링하기

immutable: 불변

Elements 생성 후에는 children이나 attributes를 바꿀 수 없다!

리렌더링 시 새 Element 생성해서 바꿔치기를 한다 -> 화면 갱신 빈도가 성능에 영향


Elements 렌더링하기

<div id="root"></div>: Root DOM Node (여기에 React Elements가 렌더링됨)

최상단
ReactDOM.render : Virtual DOM -> 실제 DOM

(실습) 시계 만들기

시계 구현 - 매초 새 Element 생성해 바꿔치기

5강. Components and Props

Components와 Props의 정의

React component

입력: Props

출력: React element

 

붕어빵틀: Component (클래스와 유사한 개념) / 붕어빵: React element (인스턴스와 유사한 개념)

 

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

- 붕어빵 안 재료 (팥, 슈크림, 고구마)

- ex. 카드 컴포넌트의 image, color, title, distance

Props의 특징 및 사용법

값을 바꾸고 싶을 때 - 새로운 값을 Component에 전달, 새로 Element 생성

 

함수의 Pure/Impure

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

Impure: 입력값을 변경

 

"모든 리액트 컴포넌트는 그들의 Props에 관해서는 Pure 함수 같은 역할을 해야 한다"

= 모든 리액트 컴포넌트는 Props를 직접 바꿀 수 없고, 같은 Props에 대해서는 항상 같은 결과를 보여주어야

= 리액트 컴포넌트 Props 바꾸지 X, 같은 Props면 같은 내용의 Element 리턴

 

Props 사용법 (JSX)

Props에 값을 넣을 경우 {} 사용해야

Props의 값으로 Component를 넣는 경우

 

Component 만들기 및 렌더링

Function Component

함수 컴포넌트

장점: 코드 간단

Class Component

React.Component를 상속받아서 만듬 -> React Component가 됨

 

Component 이름은 항상 대문자로 시작해야 함 (소문자로 시작하면 DOM 태그(내장 컴포넌트)로 인식함)

Component 렌더링

element를 만들고 렌더링 (props.name에 값 담겨 element 리턴, DOM에 업데이트)

Component 합성과 추출

Component 합성

복잡한 화면을 여러 개의 Component로 나눠서 구현 가능

Props 값 다르게 해서 여러 Component 사용하는 것

 

Component 추출

복잡한 Component 쪼개서 여러개의 Component로 나눔

재사용성 높아짐, 개발 속도 향상

 

추출 전

 

Avatar, UserInfo 순으로 추출

(실습) 댓글 컴포넌트 만들기

댓글 컴포넌트 만들기

- Comment, CommentList 코드 작성하고 렌더 함수에 작성

- CommentList div 하위에 여러 Comment 태그

 

Comment 컴포넌트에 CSS 스타일 입히기- styles에 입력하고 태그 style= 로 지정함

 

Comment 컴포넌트에 Props 추가하기

- Comment에서 텍스트를 props에서 꺼내게 수정

- CommentList에서 props 추가


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

- comments 배열에 댓글 데이터를 담고 있는 객체 넣고, map 함수로 값 매핑

6강. State and Lifecycle

State와 Lifecycle의 정의

State: 리액트 Component의 상태 (변경 가능한 데이터)

- 개발자가 정의. 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다. (그렇지 않은 값은 컴포넌트 인스턴스 필드로 정의)

- state는 JS 객체

- Class Component는 state를 생성자(constructor)에서 정의, Fuction Component는 useState 훅을 사용해서 정의

- state는 직접 수정하면 안 된다. 꼭 setState 함수를 통해 수정해야 함.

 

Lifecycle: 리액트 컴포넌트의 생명주기

- 컴포넌트는 계속 존재하는 것이 아니라 시간이 흐름에 따라 생성되고 업데이트되다가 사라진다.

 

<리액트 클래스 컴포넌트의 생명주기>

-mounting: constructor에서 state 정의됨

- render: 업데이트

- unmount: 상위 컴포넌트에서 하위 컴포넌트 더이상 렌더링 X

(실습) state 사용하기

- Notification.jsx- NotificationList.jsx- this.setState(...)로 state 변경

 

React Developer tools 설치하기- react component가 트리 형태로 보이고, 각 컴포넌트별 props, states 확인 가능

- 컴포넌트가 렌더링 되는 과정 확인 가능 (무거운 컴포넌트 찾아 성능 최적화 가능)

 

- Lifecycle Method 사용해보기

  - componentDidMount(), componentDidUpdate(), componentWillUnmount()

7강. Hooks

Hooks

- 리액트의 함수 컴포넌트에는 클래스 컴포넌트에서 사용가능한 state, lifecycle등이 없다 -> Hook을 통해 가능케 함 

- state 관련 함수, Lifecycle 관련 함수, 최적화 관련 함수 Hooks로 사용 가능

- 훅 이름은 use로 시작 (커스텀 훅 만들어서 쓸 수도 있음)

 

useState(): state를 사용하기 위한 hook

- 값이 바뀔 때마다 업데이트하고 재렌더링이 필요할 때

- 리턴값: 배열

const [변수명, set함수명] = useState(초기값);

변수 각각에 대해 set함수가 따로 존재

 

useEffect(): 함수 컴포넌트에서 Side Effect(효과, 영향)를 실행할 수 있게 해주는 hook

- 이 작업은 다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료될 수 없음 (렌더링이 끝난 이후 실행되어야 함)

- 생명주기 함수와 동일한 기능

useEffect(이펙트 함수, 의존성 배열);

의존성 배열 안에 있는 값이 하나라도 변경되었을 때 이펙트 함수 실행

기본적으로 처음 컴포넌트가 렌더링된 이후와 업데이트로 인한 재렌더링 이후에 실행

 

useEffect(이펙트 함수, []);   // Effect function이 mount, unmount 시에 단 한 번 씩만 실행

useEffect(이펙트 함수);   // 의존성 배열 생략 -> 컴포넌트가 업데이트될 때마다 호출됨

 

useState, useEffect 훅 사용 예제

 

return () => { ... }; 여기서 내부 함수는 컴포넌트가 unmount될 때 호출됨

 

useMemo, useCallback, useRef

Memoized value를 리턴하는 Hook

Memoization: 최적화를 위해 사용. 비용이 높은, 연산량이 많이 드는 함수의 호출 결과를 저장해 두었다가 같은 입력값이 들어오면 저장해 두었던 값을 바로 반환.

메모해두었다가 나중에 다시 사용

Memoized Value: 저장된 값

 

useMemo(): 파라미터로 메모를 생성하는 create 함수와 의존성 배열을 받음

의존성 배열 변수가 변했을 경우에만 create, 그렇지 않으면 기존 값 그대로 반환

=> 빠른 렌더링 속도

useMemo()로 전달된 함수는 렌더링이 일어나는 동안 실행됨

렌더링이 일어나는 동안 실행되면 안 될 작업을 useMemo()에 넣으면 안 됨 (ex. useEffect()에서 실행되어야 할 side effect)

- 의존성 배열을 넣지 않을 경우, 매 렌더링마다 함수가 실행됨 => 아무런 의미 X

- 의존성 배열이 빈 배열일 경우, 컴포넌트 마운트 시에만 create 함수가 호출됨 (마운트 이후에는 값 변경X, 마운트 시점에만 한번 계산)

하지만 대부분 의존성 배열에 변수들을 넣고, 변수가 바뀜에 따라 새로 값을 계산해야 할 때 사용

 

useCallback(): 매로 함수 새로 정의 X, 의존성 배열의 값이 바뀐 경우에만 함수 새로 정의해 리턴

의존성 배열 변수 변했을 경우만 실행

 

useCallback(함수, 의존성 배열); 과

useMemo(()=> 함수, 의존성 배열); 은

동일한 역할을 한다

훅 사용하지 않고 컴포넌트 내에 함수 정의해 자식 컴포넌트에 props로 넘겨 사용할 경우 부모 컴포넌트 재렌더링마다 함수 새로 정의됨, 자식 컴포넌트 재렌더링 됨

useCallback 사용해주면 특정 변수 값이 변경되었을 때만 재렌더링 -> 자식 컴포넌트 재렌더링되지 않음 (예제의 []: 마운트 시점에만 정의됨)

 

useRef(): Reference를 사용하기 위한 훅. 특정 컴포넌트에 접근할 수 있는 객체

- refObject.current : 현재 참조하고 있는 Element

const refContainer = useRef(초기값);

- 해당 초기값으로 초기화된 레퍼런스 객체를 반환

- 이 레퍼런스 객체는 컴포넌트 마운트 해제 전까지 유지됨

- 변경 가능한 current라는 속성을 가지는 하나의 상자

 

버튼 클릭 시 실제 input element에 접근해 focus 하도록 하는 코드

직접 current 모양 만들어 사용하는 것과의 차이: useRef 훅은 렌더링 시마다 항상 같은 레퍼런스 객체를 반환한다

또 useRef() 훅은 내부의 데이터가 변경되었을 때 별도로 알리지 않음 (current 속성 변경해도 재렌더링x)

 

DOM 노드 연결/분리 시 코드 실행하고 싶다면

=> Callback ref

 

 

Hook의 규칙과 Custom Hook

Hook의 규칙

1. Hook은 무조건 최상위 레벨에서만 호출해야 한다.

- 리액트 함수 컴포넌트의 최상위 레벨. (반복문, 중첩문 등에서 훅을 호출하면 X )

- Hook은 컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야 한다. (-> 이래야 리액트가 다수의 useState 훅, useEffect 훅 호출에서 component state를 올바르게 관리할 수 있음)

 

2. 리액트 함수컴포넌트에서만 Hook을 호출해야 한다.

- 소스 코드 통해 모든 로직 명확히 확인 가능해야. (일반적인 자바스크립트 함수에서 Hook 호출하면 안 됨. 리액트 함수 컴포넌트에서 호출하거나 직접 만든 커스텀 훅에서 호출해야 한다.

 

eslint-plugin-react-hooks

- 무조건 Hook의 규칙을 따르도록 강제해주는 플러그인. 정적 코드분석 도구. 의존성 배열이 잘못되어 있는 경우 경고+수정 제안

 

Custom Hook 만들기

- 로직 중복 해결 위해

- 커스텀 훅: 이름이 use로 시작하고 내부에서 다른 Hook을 호출하는 하나의 JS 함수

 

Custom Hook 추출하기

- 단순 함수와 같은데 이름이 use와 같고, 위의 Hook의 규칙이 적용됨. 파라미터 등은 자유


Custom Hook 사용하기

- react 기능이 x, 훅의 디자인 때문에 사용. 이름이 use로 시작하는 것은 꼭 지켜야 -> hook의 규칙 위반여부 확인 위해


- 여러개의 컴포넌트에서 하나의 Custom Hook을 사용할 때 컴포넌트 내부에 있는 모든 state와 effects는 전부 분리되어 있다.

- 어떻게 state 분리? 각 Custom Hook 호출에 대해서 분리된 state를 얻게 됨. 각 Custom Hook의 호출 또한 독립적.

 

Hook들 사이에서 데이터를 공유하는 방법

- 파라미터 사용 (useState로 id 저장, isUserOnline서  새로 선택된 사용자의 온라인여부 저장)

 

Hooks 사용해보기

useCounter.jsx

 

Accomodate 컴포넌트 만들기

- 의존성배열 없/있 훅 차이 확인

- index.js에 컴포넌트 넣

 

 

'Study > Web' 카테고리의 다른 글

[React] 처음 만난 리액트 - 8~14강  (3) 2025.07.08
[웹 공부] 생활코딩 WEB2 - CSS 강의 메모 (완강)  (1) 2023.01.31
[웹 공부] 생활코딩 WEB1 - HTML & Internet 강의 메모 (완강)  (0) 2023.01.04
'Study/Web' Related Articles more