[JSCODE] React 1회차 미션

미션

VSCode, Node.js, git 설치 및 github 계정 만들기

해당 과정은 이미 되어있어서 통과했다.

 

CRA(Creat React App) 활용해서 프로젝트 생성

create-react-app은 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생략하고 바로 간편하게 프로젝트 작업 환경을 구축해주는 도구다. 아래 명령어를 통해 실행시킬 수 있다.

npx create-react-app [폴더이름]

 

위 과정이 완료되면 지정한 이름의 프로젝트 폴더가 생성된 것을 확인할 수 있다.

해당 디렉토리로 이동하고 아래 명령어를 입력하면 react 개발 전용 서버를 구동시킬 수 있다.

npm start

 

심화 미션

실제 면접 질문에서 자주 물어보는 내용이다. 아래와 같은 내용의 면접 질문을 받았을 때, 어떻게 대답할 건지 정리해봐라.

React를 사용하는 이유에 대해 설명해주세요.

요즘 흔히 접하는 큰 규모의 웹 애플리케이션, 예를 들어 페이스북, 인스타그램을 생각해보면, 스크롤바를 내릴수록 수많은 데이터가 로딩됩니다.

이렇게 규모가 큰 웹 애플리케이션에서 DOM에 직접 접근하여 변화를 주다보면 성능 이슈가 조금씩 발생하기 시작합니다.

React는 이를 개선하기 위해 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화 함으로써 DOM 처리 횟수를 최소화하고 효율적으로 진행합니다.

그리고 기능을 Component 단위로 작성하여 생산성과 유지 보수를 용이하게 한다는 장점이 있습니다.

이러한 이유로 React를 사용합니다.

 

Virutal DOM 에 대해서 설명해주세요.

Virtual DOM은 가상의 DOM 입니다. Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다.

데이터가 변하면, 실제로 브라우저의 DOM에 새로운 값을 넣는 것이 아니라, 가상 DOM에 한번 렌더링을 하고, 이전 Virtual DOM에 있던 내용과 비교를 한 다음에 바뀐 부분만 실제 DOM에 적용해줍니다.

이러한 원리로 Vitual DOM을 사용하면 DOM의 변화를 최소화시키므로 성능 향상에 많은 도움을 줍니다.

 

오해할 수 있는 점은, Vitual DOM는 지속적으로 데이터가 변화하는 대규모 애플리케이션에서 사용하는 곳에서 진가를 발휘하지만, 단순 정적 페이지면 오히려 리액트를 사용하지 않는 편이 더 나은 성능을 보일 수도 있습니다.

 

 

 

마무리

1회차 미션은 이미 이전에 한번 해봤던 것들이라 수월히 수행해낼 수 있었다. 심화 미션은 좀 애먹었다. 

 

react를 사용하는 이유? 이건 나도 정말 궁금했던 점이었다. 그저 프론트엔드라면 당연히 공부해야할 프레임워크라 해서 공부하는 것이고, 주변인들에게 물어보면 "앱같은 웹!", "이쁜 웹!", "스무스하게 돌아가잖아!" 라는 답변이 왔었다. 이는 내가 막 코딩에 접했을 때 들었던 말이라 정말 그런 이유인 줄 알았다. 하지만 html/css/js로만 개발을 했을 때도 앞선 이유의 불편함을 느끼지 못해서 이해가 안됐다. '도대체 React를 왜 써야하는 건데!'

 

하지만 이번에 React와 Vitual DOM에 대해 알아보면서 조금은 와닿은 것 같다. 내가 개발했던 웹은 단순 정적페이지여서 react의 필요성을 못느꼈던 것 같다.

주변인들이 말한 '앱같은 웹'은 싱글 페이지 애플리케이션을 뜻한거고, '이쁜 웹'은 아마 여러 라이브러리을 제공해줘서 그런 것 같다. '스무스한 웹'은 성능 향상에 관해 말한 것 같다.

 

사실 심화미션을 할지말지 고민을 했다. 해당 개념에 대해 학습을 해봤지만, React 초짜의 입장에서 내가 제대로 이해한게 맞나 싶기도 하고, 적으려니 막상 어떻게 정리해야할 지 막막했다. 그래도 나중에 React를 어느정도 알게 됐을 때 이 글을 다시 본다면 '이때의 나는 이렇게 생각했구나~' 를 느낄 수 있을 것 같아서 작성했다. 틀리거나 빈약할 지라도 말이다.. 

점점 어려워질테지만 최대한 할 수 있을 때까지 해볼 것이다!