TIL, 06.14

리액트의 대한 첫걸음을 책 공부 시작

리액트를 다루는 기술 책을 공부를 시작하기로 하였다. 나는 리액트를 잘 몰라서 이론부터 실기까지  잘 잡아줄 책이 필요했기 때문에 여기저기 발품을 팔아본 결과 이 책이 나의 부족한 이론과 실기를 잘 잡아줄 수 있겠다고 생각했다

 

이번에 공부한 것중에 제일 만족했던 점은 기본적인 리액트가 작동되는 구조를 알게 되었고 왜 리액트에서 리액트돔이 왜 중요한지를 알게 되었다

 

나는 이전에 돔이 중요하다는 소리를 여기저기에서 듣게 되었는데 돔이 어떤 놈인지 왜 리액트에서 가상돔이 중요한지 몰랐는데  이번기회로 확실히 알게 되었다

 

돔(DOM)은 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성한다

웹 브라우저는 돔을 활용하여 객체에 JS와 CSS를 적용하는데 돔은 트리형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있다 그러나 돔은 치명적인 문제점이 있는데 바로 동적UI에 최적화되어있지 않다는 점이다!!

웹 브라우저 단에서 돔에 변화가 일어나면 웹 브라우저가 CSS를 연산하고 레이아웃을 구성하고 페이지를 리페인트(리페인트란 재성성된 레이아웃 트리(렌더트리)를 다시 레이어에 그리는 작업을 말한다)를 하고 이 과정에서 시간이 허비되는 것이다

 

여기서 리액트 돔에 중요성이 나오는데 리액트 돔을 사용하면 실제 돔에 접근하여 조작하는 대신에 추상화한 JS 객체를 구성하여 사용한다. 리액트에서 데이터가 변하여 웹 브라우저에 실제 돔을 업데이트 할때는 세 가지 절차를 밟게 된다

먼저 데이터를 업데이트하면 전체 UI를 가상돔에 리렌더링하고 이전 가상돔에 있던 내용과 현재 내용을 비교한다

그리고 바뀐 부분만 실제 돔에 적용하는 것이다 즉 리액트는 가상 돔 방식을 사용하여 돔 업데이트를 추상화함으로써 돔 처리 횟수를 최소화하고 효율적으로 진행하는 것이다

 

이것 말고도 책에서는 리액트를 어떻게 쓰는지 JSX는 무엇인지에 props와 state는 어떻게 다른지에 대해 알려주었는데

 

리액트에서 돔 요소에 스타일을 적용할 때는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어주어야 한다

CSS에서 '- '문자가 포함되는 이름을 리액트에서는 '-' 문자를 없애고 카멜 표기법으로 작성해야 한다 또한 일반 HTML에서 CSS를 사용할때는 class라는 속성을 설정하는데 JSX에서는 class가 아닌 className으로 설정해 주어야 한다

 

JSX는 공식적인 JS문법은 아니지만 편하게 UI를 렌더링 하게 할 수 있다 하지만 JSX는 웹에서 알아듣지 못하는데 이것을 바벨을 사용하여 일반 JS형태의 코드로 변환한다

 

props와 state는 둘다 컴포넌트에서 사용하거나 렌더링 할 데이터를 담고 있으므로 비슷해 보이지만 역할은 다르다

props는 부모 컴포넌트가 설정하고 state는 컴포넌트 자체적으로 지닌 값으로 컴포넌트 내부에서 값을 업데이트한다

두 가지의 종류의 state가 있는데 하나는 클래스형 컴포넌트가 지니고 있는 state이고 다른 하나는 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state이다

 

현재 리액트 개발 팀이 함수형 컴포넌트와 Hooks를 사용하는 것이 주요 컴포넌트 개발 방식이 될 것이라고 공지했기 때문에 새로운 컴포넌트를 만들 때는 useState를 사용하는 것을 권장한다

 

첫 스터디 모임

나는 나 스스로에 대해 알고 있어 날 지탱해 줄 스터디를 만들었다. 프런트 공부를 하는 동료들을 모아 스스로 최소한의 계획을 세워 그 이상의 공부를 하는 것이 이 스터디의 목적이다

 

처음에는 서로 체크만 하는 식에 방향성으로 나아가려고 했는데 팀원들과 서로 의견을 나누며 더 좋은 방향성을 찾게 되었다. 체크만 하는 것이 아니라 한 명씩 발표를 해서 공부한 것을 나누고 설로 피드백하여 발표자도 발표를 하면서 자신이 공부하면서 모자란 부분을 깨닫고 듣는 사람도 몰랐던 내용을 공부하는 방향으로 스터디를 진행하기로 하였다

 

그리고 대망의 오늘 첫 모임을 가졌다. 한 명씩 발표를 해서 자신이 공부한 것을 서로 나누고 피드백하였는데 팀원 3명이 모두 프런트 쪽을 공부하고 있어 서로 의견을 나누고 공부하기도 좋았다.

 

나는 리액트에 대한 첫걸음을 공부한 것과 JS종합반에서 배운 실행 콘텍스트의 대해 리뷰하였는데 내가 무심코 지나갔던 부분을 되짚어 주어 개념을 더 명확하게 잡을 수 있었다

그중 한 예로 리액트에서 CSS를 사용할 때는 class가 아니고 classname으로 적어야 하는데 책에서는 그렇게 해야 한다고 하니 이유를 모른 채 그냥 넘어갔던 부분이지만 다른 강의를 듣고 있지만 같은 부분을 공부하고 있던 팀원분이 class가 예약어이기 때문이라고 되짚어 주셨다

 

이렇게 피드백하면서 서로 몰랐던 부분을 되짚고 어느 한쪽이 더 많이 알고 있는 부분을 공유하며 첫 스터디 모임은 성공적이었다. 벌써 다음 스터디 모임이 기다려진다

 

여담으로 팀원 2분이 추가되었다. 한분은 지나가다 우리가 발표하는 것에 흥미를 보여 발표를 듣다가 참가하시기로 하였고 한분은 스터디가 궁금해 스터디가 어떻게 진행되는지에 대해 듣다가 참여하시기 하였다

 

후기

오늘의 후기는 없다 

 

 

 

 

 

 

 

 

 

 

 

 

코드리뷰