[28JUN, 2021] TIL

6월의 마지막 월요일! 오늘은 리액트의 기초를 정리하는 하루를 보냈다🙌🏻

 

---

 

✔️MVC (Model-View-Controller)

Model: 애플리케이션에서 사용하는 데이터를 관리하는 영역

View: 사용자에게 보이는 부분

Controller: 프로그램이 사용자에게서 어떤 작업을 받으면 컨트롤러는 모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영한다.

리액트는 자바스크립트 라이브러리로, 사용자 인터페이스를 만드는 데 사용한다. 구조가 MVC, MVW 등인 프레임워크와 달리 오직 view만 신경 쓰는 라이브러리다. 사용자 화면에 뷰를 보여주는 것이 렌더링이며 데이터가 변할 때마다 새롭게 리 렌더링을 한다. 리액트에서는 렌더 함수를 통해 최상위 컴포넌트의 렌더링이 끝나면 그 정보들을 사용하여 html 마크업을 만들고 실제 페이지의 DOM요소 안에 주입한다.

 

✔️JSX

자바스크립트의 확장 문법이다. 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 장점은 보기 쉽고 익숙하며 높은 활용도(APP컴포넌트를 HTML 태그 쓰듯이)를 가진다.

JSX문법에서는 컴포넌트에 여러 요소가 있다면 부모 요소 하나로 감싸야한다. 이유는 Virtual DOM에서 컴포넌트를 감지해낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다. (div요소 사용하고 싶지 않다면 Fragment라는 기능 사용해도 된다. 리액트 모듈에 들어있는 컴포넌트이다.)

 

✔️ref

DOM에 직접적으로 접근해야할때 사용한다. 리액트에서는 데이터가 업데이트되면 Virtual DOM에 리렌더링하고 비교한 후 실제 DOM에 적용하는 과정을 거치는 데 ref는 DOM에 직접적으로 건드릴 수 있어 꼭 필요할 때 사용한다.

 

 

 

참고: 리액트를 다루는 기술(책)