언제 리액트를 시작해야할까?

커뮤니티에서 자주 올라오는 질문중에 하나가 바로 언제 리액트를 시작해야하는지 이다.

아마 일정 경지에 올라야 리액트를 시작할 수 있다 라고 생각하는것같고 그리고 그 일정 기준이란게 있을거다 혹은 가이드가 존재하지않을까 라는 생각으로 질문하지 않을까 싶다.

 

리액트 즉 프론트개발을 공부하려면 기본적으로 html, css, javascript 를 배우라고한다. 근데 여기서 궁금증은 도대체 어디까지 배워야 얼마나 할줄알아야 리액트를 할 수 있는가 이다.

 

기준을 정해보자

이 기준을 정하려면 아래에 해당하는 질문을 스스로 답할 수 있는지 체크해보면 좋을것같다.

 

1. html, css, js 를 사용하여 강의나 블로그 클론 코딩이 아닌 스스로 한땀한땀 만들어본 사이트가 최소 3개는된다.

이쯤되면 마크업이나 코드를 작성하는데 있어서 익숙해지고 대충 레이아웃만보고 머릿속으로 이미 절반정도는 화면을 어떻게 구현할 수 있을지 구상이 가능한 단계라고 봐도 좋을것같다. 

 

2. javascript 코어에 대한 대충 이해는 하고있다.

자바스크립트코어란 변수, 식별자, 호이스팅, 클로저, 즉시실행함수, 함수선언, 익명함수, 화살표함수, 클래스, 객체, 배열, 실행컨텍스트, 프로토타입, 싱글스레드 같은것들을 말한다. 자세하게 설명은 못해도 한줄정도는 설명할 수 있어야 한다.

 

3. 브라우저의 렌더링에 대해서 알고있다.

결국 프론트개발자란 브라우저위에서 동작하는 코드를 작성하는 개발자인데 그럼 당연히 브라우저의 동작에 대해서도 이해하고 있어야 한다. 에러가 발생했을때 이게 자바스크립트에러인지 브라우저에서 던지는 에러인지 알 수 있어야 문제를 해결할 수 있다.

 

4. 비동기 처리에 대한 이해

프론트는 단순히 마크업코드만 작성하는것이 아니라 HTTP 네트워크를 통해 서버에 요청을하고 응답을 받아온 동적데이터를 처리하여 화면에 보여주는 업무를 주로 진행하게된다. 그리고 이 과정은 순식간에 이루어지지만 엄연히 처리 순서가 존재하기 때문에 비동기가 무엇인지 비동기를 처리하는 방식에 대해서 이해하고 있어야 한다.

 

리액트랑 연결해보기

그럼 각각의 조건이 리액트의 어떤 부분을 이해하는데 도움이 되는지 확인해보자

 

1. 마크업과 스크립트기본은 리액트에서 jsx 문법을 작성하는것과 연관지을 수 있다. 

2. 리액트는 결국 자바스크립트 이기때문에 자바스크립트가 갖고있는 언어적 특징과 코어에 대한 이해가 필요하다

3. 리액트는 가상돔을 사용하여 선언적 프로그래밍 방식으로 돔을 조작한다. 이 부분을 이해하기 위해서는 브라우저의 렌더링을 바탕으로 해야 이해하기 쉽다.

4. 리액트는 각 컴포넌트별로 상태를 가질 수 있는데 이 상태는 state 의 변경과 props의 변경으로 업데이트되고 리렌더링이 진행된다 이때 이 과정들이 비동기적으로 진행되기때문에 비동기처리에 대한 이해 없이는 리액트의 동작을 이해하기 매우 어려워 진다.

 

지금당장 시작해라

만약 마크업언어와 자바스크립트를 다 배웠다 생각하고 더이상 뭘해야할지 모르겠다 리액트를 해볼까 라고 생각한다면 당장 시작하라고 하고싶다. 왜냐하면 어차피 하다보면 결국 다시 기본으로 되돌아오게 되어있기 때문이다. 현업을 하면서도 리액트를 쓰면서도 결국 자바스크립트 코어에 대한 지식을 다시 습득하기위해 찾고 브라우저의 동작과 연관지어 이해하고 매끄럽게 설명하기위해 다시 찾게된다. 

그리고 다시 리액트를 한다. 즉 본인 스스로 어느정도 숙달됬다 싶으면 리액트를 시작해도 된다. 다만 곧 후회하고 다시 되돌아 갈것이다.

리액트를 해봐야지만 필요하다 느끼고 알게되는것도 있기때문에 너무 완벽하게 이전 단계를 수행하려고 하지 않아도 된다.

 

리액트를 시작하면 더 많은것이 존재한다는걸 알 수 있다. 

웹팩, 바벨, 상태관리, 리덕스, 몹엑스, 리코일, 롤업, 타입스크립트, 클래스컴포넌트, 함수컴포넌트, 라이프사이클, 훅

npm, 패키지관리, 프로젝트 구조, 모듈, SPA, CSR, SSR ......