- 리액트 공식문서를 기준으로 정리해 나가보자.
조금조금 REACT
01 React란?
리액트는 사용자 인터페이스(UI)를 구축하기 위한 "자바스크립트" 라이브러리로, 작은 블럭단위의 사용자 정의 태그(<마크업언어>)로 만들어진 "컴포넌트"들의 집합으로 SPA(싱글페이지 어플리케이션)을 만들어내는 도구이다.
컴포넌트를 만드는 2가지 방법 : 클래스형, 함수형
객체지향 프로그래밍 : 컴포넌트 사이의 소통 : props, useState
02 데이터 바인딩
마이크로소프트의 정리에 따르면, 데이터 바인딩이란 앱UI와 해당 UI가 표시하는 데이터를 연결하는 과정을 지칭한다. 이는 엄밀하게 말해서 바인딩이 설정 된 후, 데이터가 적절한 알림을 제공하며 데이터의 값이 변경될 때마다 데이터에 바인딩된 요소에 변경 사항이 자동으로 반영되는 것을 말한다. 또한 요소에서 데이터의 외부 표현이 변경되면서 동시에 내부 데이터가 자동으로 업데이트되어 변경 내용이 반영되는 것도 지칭한다.
OneWay, 단방향 바인딩
단방향 바인딩을 사용할 경우, 소스 속성이 변경될 경우 대상 속성이 자동으로 업데이트되지만, 대상 속성이 변경될 경우 변경 내용이 다시 소스 속성으로 전파되지 못한다.
TwoWay, 양방향 바인딩
반면에 양방햔 바인딩은 소스 속성 또는 대상 속성이 변경되면 다른 항목도 자동으로 업데이트되는 데이터 데이터 간의 연결작용을 다룰 때 지칭한다.
단방향과 양방향, 그리고 자바스크립트 라이브러리
대부분의 자바스크립트 프레임워크들은 단뱡항 데이터 바인딩을 지원하지만, 얭귤러Js의 경우 양뱡향 데이터 바인딩을 제공한다. 단뱡향 데이터 바인딩은 데이터와 템플릿을 결합하여 화면을 생성하고, 양뱡향 데이터 바인딩은 데이터의 변화를 감지해 템플릿과 결합하여 화면을 갱신하고 화면에서의 입력에 따라 데이터를 갱신한다.
- 단방향(리액트), input 등을 통해서 담아온 정보는 적절한 Event를 통해서만 상수/변수에 담겨질 수 있다. (onClik)
- 양뱡향 바인팅, 앵귤러/뷰의 경우 사용자가 입력한 값이 곧바로 코드 상의 변수에 바인딩 된다.
리액트는 대표적인 단뱡항 데이터 바인딩 영역에 속하는 라이브러리인데, state 관리에서 props를 통해서 부모에서 자녀 컴포넌스로 단뱡향 송신이 이뤄졌고, 이를 통해서 자식 컴포넌트는 데이터의 흐름을 명확하게 이해할 수 있는 환경이 구축된다.
03 SPA 방식과 MPA 방식
싱글페이지 어플리케이션이 등장하기 전까지 웹 브라우저의 세계는 모두 멀티페이지 어플리케이션의 시대였다. 그런데 기존의 멀티페이지의 단점들에서 새롭게 구상된 방식이 싱글페이지 어플리케이션이다.
기존의 멀티페이지 애플리케이션은 1) 좋아요를 눌렀을 때마다 다시 로팅을, 2) 여러가지 동작에서 계속해서 화면이 깜박거린다면 매우 불편했을 것이다.
이러한 불만에 대한 대안으로 나온 것인 SPA이다. 최초에 서버에 1회만 리소스를 요청하며, 이후에는 필요한 부분만데이터를 받아와서 기존 페이지를 "수정" 변경해준다. 그러나 명백한 단점이 존재하는데, 구글의 검색엔진이 찾을 수 없다.
04 리액트의 불편성
리액트는 useState로 인해서 정보가 기존의 것과 다르면 화면의 부분을 리렌더링하는데, 그 조건이 불변하는 데이터가 변경되었을 때이다. 이때 기억할 것이 있는데 바로 객체이다. 객체는 그 특성상 얕은복사가 발생된다는 점을 기억해야 하며, 이럴 시에 리액트는 데이터가 변경되었다고 인식하지 못하기 때문이다. 그 결과 화면을 리렌더링하지 않게 된다는 점을 기억해야 한다.
05 SEO와 리액트
SEO란 Search Engine Organization의 약자이다. 한국어로는 검색엔진최적화라 불리는데, SPA를 추구하는 리액트는 단일한 HTML 파일(index.html) 하나밖에는 없기 때문에, 검색에 있어서 불리한 부분이 있다. 이는 정적으로 기록된 HTML과 달리 동적으로 작성되기 때문이다. 이에 대한 보완으로 등장한 라이브러리가 Next.JS이다.
06 export와 export default의 차이
가장 큰 차이는 컴포넌트를 내보내는 방식이다.
- export는 사용자가 지정한 이름을 그대로 내보내고
- export default는 default로 내보낸다. default로 내보내졌다는 것은 아무이름으로 받아올 수 있다.
- 만약 export 가 복수라면 export를 지향해야 하고, 한 모듈 안에서 export한 대상이면 export default를 사용한다.
그러나 뭔가 명확하지 않다. 모질라
07 리액트 컴포넌트
🔐 리액트 컴포넌트란 뭘까요? 리액트 컴포넌트의 종류는 무엇이 있으며, 현재는 어떤 방식이 더 각광받고 있는지에 대해 적어보세요. 또한 다음 추가 질문에 대한 O, X를 말씀해주세요.
- class 컴포넌트
- functions 컴포넌트가 있고, 현재 더 각광받고 있다.
- X : 컴포넌트를 만들 때 컴포넌트 이름은 반드시 가장 첫 글자가 대문자일 필요는 없다.
- O : 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓는다.
보통 디렉토리 파일명은 소문자로 작성하며, CamelCase로 작성한다. 만약 디렉토리 자체가 react 컴포넌트가 바로들어 있는 폴더라면 폴더이름을 대문자로 시작하며, 직접적으로 바로 react 컴포넌트가 들어있지 않은 간접적인 관계의 폴더라면 소문자 단수로 표기한다. 그러나 중요한 것은 이름이 명확해야 한다.
