리액트란 무엇인가?
리액트는 프론트엔드 개발을 위한 JS 오픈소스 라이브러리이다.
리액트는
- 선언형
- 컴포넌트 기반
- 범용성
선언형
리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS를 나눠서 적기보다, 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다.
컴포넌트 기반
하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발된다.
컴포넌트로 분리하면 서로 독립적이고, 재사용 가능하기 떄문에 기능 자체에 집중하여 개발할 수 있다.
범용성
리액트는 JS프로젝트 어디에든 유연하게 적용될 수 있다.
JSX란 무엇인가
JSX는 Java Script XML의 줄임말로, JavaScript를 확장한 문법이다.
JSX는 JavaScript가 확장된 문법이지만, 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아닙니다. 그렇다면 어떻게 해야 할까요? 바로 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 합니다.
이때 이용하는 것이 바로 “Babel”입니다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일합니다. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있습니다.
React에서는 DOM과 다르게 CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있습니다.
JSX 없이도 React 요소를 만들 수 있습니다. 다만 코드가 복잡하고, 가독성이 떨어지는 단점이 있죠.
JSX 문법
JSX에서 여러 엘리먼트를 작성하고자 하는 경우, 최상위에서 opening tag와 closing tag로 감싸주어야 합니다.
React에서 CSS class 속성을 지정하려면
"className"으로 표기해야 합니다.
JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 합니다.
중괄호를 사용하지 않으면 일반 텍스트로 인식합니다.
React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 합니다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 됩니다.
이렇게 대문자로 작성된 JSX 컴포넌트를 따로 사용자 정의 컴포넌트라고 부릅니다
조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 합니다.
React 에서 여러 개의 HTML 엘리먼트를 표시할 때는 "map()" 함수를 사용합니다.
map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 합니다.
컴포넌트 기반 개발
컴포넌트는 "하나의 기능 구현을 위한 여러 종류의 코드 묶음이다."
