1차 프로젝트가 끝나고 리액트 강의가 본격적으로 시작되었다.
컴포넌트 구조와 JSX 문법을 접할 때까지만 해도 '오... 재미있네' 하는 생각이었으나,
수많은 콜백 함수의 폭격에 얻어맞으며 그날그날의 수업 내용을 따라가기에 급급해지고 말았다. 🫠
다행히 리액트 과정은 코딩온에서 제공하는 온라인 강의가 있어 리액트에 대해 천천히 복습하고 정리해 보려 한다.
React의 특징
React란, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다.
-
Component 기반 구조
리액트에서는 퍼즐처럼 쪼개진 컴포넌트들을 조립해 화면을 구성한다.
이렇게 컴포넌트를 사용하게 되면 기능, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높고,
서비스가 복잡해지더라도 코드의 유지 보수와 관리가 용이하다는 장점이 있다. -
단방향 데이터 흐름
리액트에서 다뤄지는 데이터(==props)는 부모 컴포넌트에서 자식 컴포넌트로만 전달이 가능하다.
이렇게 되면 버그가 생겼을 때 빠르게 진단하고 디버깅할 수 있다. -
Virtual DOM(Document Object Model, 웹 페이지를 브라우저가 이해하고 조작할 수 있도록 만드는 시스템)
이벤트 발생 시, 실제 DOM이 아닌 가상 DOM을 사용하여 변경 사항이 있는 부분만 리렌더링한다.
(사이트에서 카테고리 탭을 선택했을 때 전체 화면이 다시 렌더링되는 것이 아니라, 고정되어 있는 요소들(ex. 메뉴바)는 그대로 두고 각 카데고리에 해당하는 내용만 보이게 되는 것을 생각하면 된다!)
즉, 불필요한 리렌더링이 일어나지 않으므로 앱의 효율성과 속도가 훨씬 개선된다. -
props와 state 사용
앞서 '단방향 데이터 흐름'의 특징와 같은 결에서, 자식 컴포넌트에서는 props를 변경할 수 없다.
그럼 props의 값을 변경하고 싶은 경우는 어떻게 할까?
이때 사용되는 것이 state이다. 각 컴포넌트 내부에선 props를 다룰 수 있는 state를 사용할 수 있다.
- JSX 문법
리액트에서는 JS에 XML을 추가해 확장한 문법인 JSX 문법을 사용한다.
기존엔 HTML 파일에서 script 태그를 사용해 js 코드를 작성했지만, JSX 문법을 사용하면 js와 html을 동시에 작성할 수 있다.
const helloEl = <h1>Hello World</h1>요런 코드 작성이 가능해지는 것이다.
여기까지 리액트의 특징 끝!
