카테고리 없음

[25.01.03]CH 5. 리액트 강의 수강8 + WIL

rkdguscjf111 2025. 1. 3. 17:25

(1) React Components란 무엇일까요?

  • (1)-1. 컴포넌트 개념 이해하기컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 ****입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.
  • (1)-2. 리액트 컴포넌트를 표현하는 두 가지 방법
    • 함수형 컴포넌트

  • 클래스형 컴포넌트

두 가지 모두 기능상으로는 동일하지만, 공식 홈페이지에서는 함수형 컴포넌트를 사용하기를 권장하고 있습니다. 그리고 훨씬 쉬워요!! 🙂 여러분이 일하게 될 환경에서도 함수형 컴포넌트를 훨-씬 더 많이 사용하게 될겁니다. 우리 과정에서도 함수형 컴포넌트를 사용할거에요!

  • 2)-3. 주의사항
    • 컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 합니다.
    • 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓습니다.

 

03. JSX

<aside> ⚠️ 그럼 JSX에서 쓰는 <div>~~</div>는 DOM 요소인가요? 정확히는 React 요소예요! 차이가 뭐냐구요? 이건 **가상돔(Virtual DOM)**을 배우면서 조금 더 자세히 이야기해볼테니, 지금은 리액트 돔을 구성하는 건 리액트 요소! 돔을 구성하는 건 돔 요소! 라고만 알아둡시다. ****

</aside>

<aside> ⚠️ 브라우저는 JS만 해석 가능한게 아닌가요? 맞아요. 브라우저는 jsx 파일을 직접 해석할 수 없습니다. 따라서 babel을 이용하여 jsx를 js로 변환해요!

</aside>

 

01. Props의 개요

<aside> ✔️ 부모 → 자식 데이터 전달 메커니즘인 props에 대해 알아봅니다.

</aside>

(1) props란 무엇일까요?

  • (1)-1. 컴포넌트 끼리의 정보교환 방식아래에서 계속 나올 2가지 내용을 반드시 기억해주세요!
    1. props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향).
    2. props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.
  • 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터에요! 다시 말해, 컴포넌트 간의 정보 교류 방법입니다.

03. 불변성

<aside> ✔️ 불변성은 리액트의 state 개념을 이해하기 위해 꼭 필요한 개념입니다.

</aside>

(1) 불변성이란?(+메모리에 저장되는 원리)

  • (1)-1. 불변성이란?
    • (1)-1-1. 아직 불변성이 헷갈리는 당신을 위해
      1. 변경 가능한 상황(=불변성이 없는 경우): 종이컵에 색깔을 칠하고, 그 위에 다른 색을 또 칠해서 원래 색을 가릴 수 있어요. 이것은 원래 종이컵의 색을 변경하는 것입니다.
      2. 변경 불가한 상황(=불변성이 있는 경우): 색깔이 칠해진 종이컵은 그 색을 바꿀 수 없어요. 새로운 색을 사용하고 싶다면, 새로운 종이컵을 가져와야 하고 그 종이컵에 새로운 색을 칠해야 합니다. </aside>
    • <aside> 💡 이렇게 생각해봅시다!
  • 불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말합니다. 자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없습니다.

불변성을 깨뜨리는 것이 왜 문제가 될까요?

  1. 예측 불가능한 코드: 데이터 구조를 직접 변경하면, 프로그램의 다른 부분에서 해당 데이터 구조를 참조하고 있을 때 그 부분들도 예상치 못한 방식으로 변경될 수 있습니다. 따라서 알 수 없는 버그를 발생시킬 수 있고, 프로그램의 동작을 예측하기 어렵게 만듭니다.
  2. 버그 추적의 어려움: 원본 데이터가 여러 곳에서 변경될 수 있다면, 어떤 부분의 코드가 데이터를 변경했는지 추적하기 어려워집니다. 이는 특히 큰 코드베이스나 여러 개발자가 협업하는 환경에서 문제가 될 수 있습니다

변경 가능한 방법(Mutable way)
불변성을 유지하는 방법(Immutable way) :

  • (1)-2. 변수를 저장하면 메모리에 어떻게 저장이 될까?
  • 하지만 원시데이터가 아닌 값(객체, 배열, 함수)는 이렇지 않아요. let obj_1 = {name: ‘kim’} 이라는 값을 선언하면 메모리에 obj_1이 저장이 됩니다. 그리고 이어서 let obj_2 = {name: ‘kim’} 이라고 같은 값을 선언하면 obj_2라는 메모리 공간에 새롭게 저장이 됩니다. 그래서 obj_1 === obj2 는 false 가 되죠.
  • 만약 우리가 let number = 1 이라고 선언을 하면, 메모리에는 1 이라는 값이 저장됩니다. 그리고 number 라는 변수는 메모리에 있는 1을 참조하죠. 그리고 이어서 우리가 let secondNumber = 1 이라고 다른 변수를 선언을 했다고 가정해봅시다. 이때도 자바스크립트는 이미 메모리에 생성되어 있는 1이라는 값을 참조합니다. 즉, number와 secondNumber는 변수의 이름은 다르지만, 같은 메모리의 값을 바라보고 있는 것이죠. 그래서 우리가 콘솔에 number === secondNumber 를 하면 true가 보입니다.

(2) 리액트에서 불변성이 가지는 의의

리액트에서는 화면을 리렌더링 할지 말지 결정할 때 state의 변화를 확인합니다.

state가 변했으면 리렌더링 하는 것이고, state가 변하지 않았으면 리렌더링을 하지 않죠.

그때, state가 변했는지 변하지 않았는지 확인하는 방법이 state의 변화 전, 후의 메모리 주소를 비교합니다. 그래서 만약 리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 않고, 직접 수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없게 되는것이죠. 그래서 즉, 개발자가 값은 바꿨지만 리액트는 state가 변했다고 인지하지 못하게 됩니다. 그래서 결국 마땅히 일어나야 할 리렌더링이 일어나지 않게되죠.

 

(2) 렌더링 트리거

앞선 학습자료에서 렌더링이 발생하는 경우를 다뤘었는데 혹시 기억하고 계신가요?

  1. 첫 리액트 앱을 실행했을 때
  2. 현재 리액트 내부에 어떤 상태(state)에 변경이 발생했을 때.
    • 컴포넌트 내부 state가 변경되었을 때
    • 컴포넌트에 새로운 props가 들어올 때,
    • 상위 부모 컴포넌트에서 위에 두 이유로 렌더링이 발생했을 때

WIL(Weekly I Learned)

오늘은 UX집중반 과제와 강의를 수강하였습니다 .사실 강의의 경우 리액트 기초 분법을 배우는 단계인데 부연설명이나 안내 혹은 추가적인 설명없이 휙휙넘어가는 느낌이 강해서 해당 내용을 아주 조금 맥락만 파악하고 넘어가는 느낌이 드는 것 같습니다. 그렇기에 사실 스파르타 코딩클럽의 프로덕트(UXUI) 디자이너 강의의 커리큘럼이 매우 잘못되었다고 생각하였지만 그래도 강의는 완강해야 되기 때문에 그냥 읽고 넘기는 식으로 진행하려고 합니다. 약간 처음에는 현타와 시간이 아깝다는 생각도 들었지만 강의를 완강하는 것에 의미를 두려고합니다.