[TIL-006] 리액트 개념, 리액트에서 SCSS 사용해 보기

Today목표 : 4/15일 리액트 개념, 리액트에서 SCSS 사용해 보기

---

알게된 점,

 

리액트 개념 공부✅

1. State를 쓰는 이유

상태값에 따라 UI를 변경하기 위해서 => 리렌더링을 다시 하기 위해서

state는 구조분해 할당하여 사용한다.

const [state, setState] = useState(0)

 

2. 리액트의 생명 주기

mount - update - unmount

1) 불변성 => 메모리의 값을 변경할 수 없는 것

- 원시타입 : 불변함 => 메모리값을 변경하지 않고, 새로 할당하기 때문

- 객체타입 : 가변함 => 주소값 안의 데이터를 변경 => obj1 영역의 메모리 값을 변경하기 때문 => 따라서 복사 시에 주소값을 새로 할당하여 새 obj영역의 주소를 부여해 메모리값이 변경되지 않도록 불변성을 유지하도록 한다.

2) React는 State가 변경될 때 마다 화면이 리렌더링(update) 된다. => state 값이 변경되지 않으면 리렌더링x (변수 사용시 리렌더링x)

- React는 화면을 렌더링할지를 state의 변화에 따라 결정한다. => 단순 변화는 무시한다.

3) React State에서 불변성이 중요한 이유

- 객체의 주소값이 같으면, 객체 안의 값을 변경하더라도 화면이 업데이트 되지 않는다. => 다른 주소값을 바라보도록 새로 할당 한다. => 원시 데이터가 아닌 배열, 객체 등은 불변성을 지켜주는 filter, map, 스프레드 연산자 등의 여러가지 방법을 이용해서 처리한다. 

 

3. 컴포넌트 - 선언체 vs 명령체

1) 명령형 프로그래밍 => 직접 DOM 객체를 조작한다.

2) 선언형 프로그래밍 => React

UI를 선언하고 render함수 호출 시 화면에 출력한다.

=> DOM을 직접 조작이 안좋은 것은 아니다. 다만 코드가 굉장히 길어지고 관리하기가 굉장히 힘들어진다.

UI시스템이 비대해짐에 따라 더 복잡한 UI에서는 이를 효율적으로 관리하기 위해 React 등과 같은 것들이 생긴 것이다.

 

4. 렌더링

컴포넌트가 현재 'Pros'와 'state'의 상태에 기초하여 UI를 어떻게 그릴지 컴포넌트에게 요청하는 작업을 의미한다.

1. 렌더링 트리거

1) 렌더링을 일으킨다 - triggering  => UI를 요청함

2) 렌더링 - rendering => 컴포넌트가 UI를 만들고 준비

3) 렌더링 결과를 실제 DOM에 커밋 - commit(완료done)=> 리액트가 준비된 UI를 사용자에게 보여준다.

 

5. 렌더링 트리거의 기준

1) 첫 리액트 앱 실행 시

2) 현재 리액트 내부에 어떤 상태(state)에 변경이 발생했을 때

- state가 변경되었을 때

- 컴포넌트에 새로운 props이 들어올 때

- 상위 부모 컴포넌트에서 위 2가지 이유로 리렌더링의 발생했을 때

 

6. 렌더링 과정 => 리액트 앱 실행 => 첫 렌더링 => 컴포넌트 root에서 시작 => 아래로 쭉 훑으며 컴포넌트가 반환하는 JSX 결과물을 DOM요소에 반영

7. 리렌더링 과정

- Virtual DOM (VDOM) : UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념이다. 이 과정을 재조정이라고 한다.

=> 여러 상태가 변경되면 리액트가 큐 자료구조에 넣어 순서 관리 => 이전 VDOM과 현재 VDOM을 비교하여 실제 변경된 부분만 Render tree에 반영 => DOM이 반영된다.

 

8. JSX => Babel을 통해 JS로 변환된다.

 

 

리액트에서 SCSS 사용해 보기 ✅

리액트를 시작하면 꼭! SCSS를 사용해 보고싶었는데, 이번 기회에 처음으로 리액트에서 SCSS를 사용해 보게 되었다. 하지만 여러가지 난관이 있었다...🥲

 

❗yarn start시 => 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

=> react-scripts가 설치되어 있지 않아 start 명령어를 수행할 수 없다는 뜻이다. 설치해 주도록 한다.

yarn add react-scripts

 

node_module이 설치된다.

[React] 'react-scripts'은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니

 

❗프로젝트 셋팅 시에 .gitignore파일을 삭제했더니 .gitignore 파일 안에 node_module이 있었는지 React 폴더에 SCSS설치 후 git에 add 했을 때, node_module이 끝도 없이 많은 파일들이 계속해서 업로드되었다.. 멈추질 않아서 강제 종료 하고 다시 껐다 켰다를 반복하고, 레포도 삭제해 보고, 새로 클론하고, 몇 시간동안 고생한 후에야 CRA에서 생성한 .gitignore을 삭제했기 때문이란 것을 알았다..

활성 변경 사항이 너무 많아 node_modules를 제외하고 업로드하라는 것 같다...이게 무슨... 저번에 튜터님께서 파일로 주고 받을 경우 파일용량이 너무 크기 때문에 node_module은 제외하고 주고받는 것이 꿀팁이라고 하셨는데 비슷한 맥락인 것 같다.

The git repository at "c:\Users\rksk7\OneDrive\바탕 화면\hanghae-react-todoList" 
has too many active changes, only a subset of Git features will be enabled. 
Would you like to add "node_modules" to .gitignore?

'git 저장소("c:\사용자\rksk7\OneDrive\colon\hanghae-react-to-doList"에 활성 변경 사항이 너무 많아서 Git 기능의 하위 집합만 사용할 수 있습니다. .gitignore에 "node_modules"를 추가하시겠습니까?'

이를 해결하기 위해 다시 git에서 clone한 후, gitignore 파일을 복구하여 node_modules 등 CRA에서 자동적으로 제외시킨 파일들을 추가해줬다.

다행히 무사히 push에 성공했다!🥲

 

다음 번에 clone받을 경우 node_module을 다시 생성하는 방법

npm install
yarn init

다음 문서는 npm관련하여 잘 정리되어 있어 참고하면 좋을 것 같다.

찬미니즘

 

 

❗SCSS를 모듈화하여 styles로 사용하고 싶은데 그냥 import하면 사용 가능하지만, 모듈화를하면 CSS가 연동이 안되는 문제 발생..

나는 SCSS에서 컴파일된 CSS파일을 import해서 사용하는줄 알았는데 알고보니 SCSS를 import 하는 것이었다..

또, 모듈로 사용하기 위해서는 파일명에 꼭 .module을 사용해 주어야 했는데 이 부분을 깜빡하고 있었다...

변경하니 모듈로 잘 사용할 수 있는 것을 확인했다.

import styles from "./button.module.scss";

사용방법은 다음 포스팅에 정리해 놓았다.

[React] CRA에서 eject없이 SCSS사용하기

 

 

 

배운점 , 아쉬운 점

처음으로 SCSS를 리액트에서 사용해 봤기 때문에 굉장히 만족스러웠다.

하지만 아무래도 첫 사용이기도 하고 오랜만에 리액트를 사용하다 보니 몇 시간 동안 삽질을 반복했다......

그래도 오늘 한 실수를 기록해 놓았으니 다음 번엔 반복하지 않을 수 있을 것 같아 하나 더 배운 것 같다.

아직도 SCSS와 CSS파일을 같이 관리해 놓아야 하는지, SCSS의 파일과 리액트 파일 구조를 어떻게 설계 해야 좋을지 감이 잘 안온다. 기술 매니저님께 여쭤봤지만 해답을 얻진 못했다.. 이 부분은 경험이 조금 쌓여야 해결될 수 있을 것 같다.