React

React : 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리, 특징으로 선언형, 컴포넌트 기반, 범용성이 있다

JSX (JavaScript eXtention) : JavaScript를 확장한 문법. React에서 UI를 구성할 때 사용한다. JavaScript는 아니라 브라우저가 실행 못 하지만 Babel을 사용하여 JavaScript로 변환할 수 있다.

React JSX 활용 규칙

map: React에서 반복하는 데이터를 렌더링 할 때 사용

컴포넌트: 하나의 기능 구현을 위한 여러 종류의 코드 묶음UI를 구성하는 필수 요소. UI의 한 부분을 담당하며 각각 독립적인 기능을 가진다 = 컴포넌트 여러 개가 조합되어 애플리케이션이 만들어진다.

Create-React-App: React SPA(Single-Page Application)를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인. React + 다양한 node.js 패키지

Font-Awesome: The internet's most popular icon toolkit. 자주 쓰는 아이콘을 모은 오픈소스 라이브러리

리액트에서 자주 쓰는 if문 작성패턴 5개

SPA (Single Page Application): 서버로부터 완전히 새로운 페이지를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동하는 웹 애플리케이션이나 웹 사이트를 말함

React Router: React에서 많이 사용하는 라우팅용 라이브러리

Props: 부모 컴포넌트로부터 전달받은 값, 컴포넌트가 최초 렌더링될 때에 화면에 출력하고자 하는 데이터를 담은 초기값으로 사용. 객체 형태, 어떤 타입의 값이라도 전달할 수 있도록. 읽기 전용, 외부로부터 전달받아 함부로 변경될 수 없다

State: 컴포넌트의 상태. 컴포넌트 내에서 변할 수 있는 값. 상태에 따라 컴포넌트가 바뀌어야 할 때 State를 활용한다

React 이벤트 처리: 카멜 케이스(camelCase) 를 사용, { } 속의 이벤트 처리 함수(이벤트 핸들러, Event handler)로 전달

State 끌어올리기: React에서 아래의 데이터를 위로 끌어올리고 싶을 때 사용하는 방법

React Effect Hook: React에서 AJAX 요청이 필요하거나 외부 API를 사용하고 싶을 때, 그것을 다루는 방법. useEffect 사용법.

Component-Driven Development: 컴포넌트 수준에서 시작해 페이지나 화면을 완성. 부품 단위로 UI 컴포넌트를 만들어 나가는 개발.

구조적인 CSS를 작성하는 방법들: 갈수록 복잡해지는 CSS, 구조적인 CSS가 필요하다!

Styled Components: 가장 인기 있는 CSS-in-JS 관련 React 라이브러리