리액트 총정리

JSX

1. 정의
   • 자바스크립트를 확장한 문법으로 HTML과 매우 비슷해보인다.
   • 리액트의 요소(element)를 만든다.
2. 사용해본 경험
   • 리액트에서 UI를 만들 때 사용한다.
3. 장점
   • HTML과 매우 유사해서 화면에 보이는 요소들을 생성하는 코드를 작성할 때 감이 쉽게 잡히고 코드를 읽기 쉽다.
   • JSX에 사용자 input을 넣으면, 렌더링 되기 전에 이스케이프(새로운 문자열로 반환)하기 때문에 해커의 주입 공격을 방지한다.

리액트란?

1. 정의
   • 페이스북에서 제공하는 컴포넌트 기반의 자바스크립트 라이브러리.
2. 사용해본 경험
   • 프로젝트 규모가 커지고 다양한 UI와 상호작용해야 될 때 DOM 요소 하나하나를 관리하기 매우 힘들다.
   • 자바스크립트는 컴포넌트 단위로 동작하지 않아서 어떤 한 부분만 작동시키고 싶을 때 자바스크립트는 화면의 모든 UI가 동시에 동작한다. 이런 비효율적인 부분을 줄이고 싶어서 리액트를 사용한다.
3. 장점
   • JSX 문법을 사용해서 코드가 사용하고 보기 편하다.
   • 동작시키고 싶은 부분만 컴포넌트를 동작시키면 되서 더 효율적이다.
   • 컴포넌트에 변화가 생기면 Virtual DOM을 생성한다. 이후 Virtual DOM과 실제 DOM을 비교하고, 변화가 발생한 부분만 업데이트 한다.
4. 사람들이 리액트를 사용하는 이유
   • 다른 프론트엔드 프레임워크나 라이브러리에 비해 상대적으로 오래되어서 커뮤니티가 매우 크고, 페이스북에서 만든 거라서 오류 수정이나 버그 부분도 많이 없어서 믿고 사용할 수 있다.
   • 사용할 수 있는 라이브러리가 매우 많다.

CRA

1. 정의
   • 리액트를 빠르고 쉽게 사용할 수 있게 만들어진 패키지로, 리액트를 사용해서 웹을 만들 때 필요한 기능들을 세팅해준다.
2. 사용해본 경험
   • 웹사이트를 만들 때 npm을 통해서 다운로드 하고 실행하는데, CRA 하나면 다른 기능들을 부가적으로 다운로드 받지 않아도 되서 매우 편하게 작업했다.
3. 장점
   • Typescript와 자바스크립트의 최신 문법인 es6 사용이 가능하다.
   • src 폴더 안에 reset.css를 이용해서 브라우저마다 다른 UI 환경에서도 잘 구현될 수 있게 해준다.

컴포넌트

1. 정의
   • 화면에 보이는 UI를 독립적이고 재사용 가능하게 나눈 부분.
2. 사용해본 경험
   • 하트를 클릭하면 하트 색깔이 변하거나 버튼을 누르면 버튼 누른 횟수가 화면에 보이게 만들 때 주로 쓴다.
   • 화면에서 변하는 어떤 한 부분만을 바꾸고 싶을 때 주로 사용한다.
   • 반복되는 부분이나 코드 줄이 매우 긴 부분도 컴포넌트 단위로 나눠서 사용한다.
3. 장점
   • 반복되는 부분을 컴포넌트로 바꾸면 map 함수를 이용해서 컴포넌트를 반복 생성할 수 있는데, 이렇게 되면 코드 줄이 상당히 많이 줄어들어 유지보수하기 매우 편하다.
   • 컴포넌트 단위로 작업하지 않으면 변하지 않아도 되는 부분도 똑같이 바뀔 수 있는데, 이런 부분들을 많이 줄여준다.
4. 사람들이 많이 사용하는 이유
   • 기술이 발전하면서 웹이 많은 기능들을 수행하고 훨씬 복잡해졌다. 이럴 때 컴포넌트 단위로 작업하지 않고 화면에 보이는 전체 UI 단위로 작업을 수행한다면 비효율적일거다.

SASS

1. 정의
   • CSS 전처리기로 불리는데, CSS를 확장한 언어로 CSS에서 사용할 수 있는 문법을 확장해서 나중에 프로그램에 사용될 때 다시 CSS로 해석된다.
   • CSS가 분명 쓰기 쉬운 언어는 맞지만, 프로젝트의 규모가 커질수록 선택자(selector) 사용이 많아지고, 코드가 길어진다.
2. 사용해본 경험
   • 리액트는 컴포넌트 단위로 작업하는데, 이 때 네스팅을 적극적으로 사용하는 SASS 덕분에 CSS 스타일이 어디서 어떻게 사용되는지 구조를 더 쉽게 파악할 수 있다.
3. 장점
   • Nesting : 어떤 CSS Selector를 다른 CSS Selector의 스코프에 집어넣는 개념. 주로 부모 요소에 자식 요소를 집어 넣는다. 이로써 코드의 중복을 피하게 되고, 두 Selector의 관계를 쉽게 파악할 수 있다.
   • 변수 : 변수를 선언함으로써 중복되는 코드를 줄일 수 있다.
4. SCSS와의 차이 : 거의 비슷하지만, 문법적인 부분에서 조금 다른데 가장 큰 차이로 sass는 중괄호를 안쓰지만, scss는 중괄호를 쓴다. 이 부분에서 scss가 css와 더 흡사하게 보일 수 있다.

Router

1. 정의
   • 라우팅 : 다른 경로에 따른 다른 화면을 불러오는 것.
   • 리액트는 SPA(Single Page Application) 방식으로 여러 개의 페이지를 이용해 페이지간 이동 개념이 아닌, 하나의 페이지 안에서 상황에 따라 필요 데이터만을 load 해주는 형태를 가진다.
     이 때, URL 의 값에 따른 View Page 를 load 해서 보여주는 기능을 리액트-라우터(React-Router)가 담당한다.
2. 장점
   • 페이지가 새로 리로드 되는게 없어진다.
3. 사용해본 경험
   • 여러 페이지가 있는 한 웹사이트를 만들 때, 하나의 페이지에서 다른 페이지로 갈 때 매번 페이지가 새로 고침되면 그만큼 작업량이 많아져서 불필요한 소모를 낳게 된다.

SPA

1. 정의
   • 브라우저에 최초로 한 개의 페이지가 띄워지고, 바껴야 하는 특정 부분들을 페이지 내에서 계속 바꾸는 형태.
   • 새 html을 가져오지 않고 현재 페이지에서 링크 클릭과 같은 탐색 동작에 대한 응답으로 콘텐츠를 다시 렌더링하는 웹페이지
2. 장점
   • 페이지가 새로 고침되는 현상이 없어진다.
   • html 파일을 한 개만 쓸 수 있다.