2021/12/01
React
프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리.
리액트의 3가지 특징 : 선언형, 컴포넌트 기반, 범용성
- 선언형(Declarative) : 리액트는 한 페이지를 보여주기 위해서 HTML,CSS,JS로 나누어 작성하기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향
- 컴포넌트 기반(Component-Based) : 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발함. 컴포넌트로 분리하면 서로 독립적이고 재사용 가능 → 기능 자체에 집중하여 개발할 수 있다.
- 범용성(Learn Once, Write Anywhere) : 리액트는 JavaScript 프로젝트 어디에든 유연하게 적용 가능. 리액트 네이티브로 모바일 개발도 가능하다.
컴포넌트?
- 구조와 동작에 대한 코드를 한 뭉치로 적은 코드셋
- 모든 리액트 애플리케이션은 최소 1개의 컴포넌트를 가지고 있음. (root)
- 최상위 컴포넌트는 다른 자식 컴포넌트를 가질 수 있음. (트리 구조)
JSX
JavaScript XML의 줄임말. (문자열도 아니고, HTML도 아님)
JavaScript를 확장한 리액트에서 UI를 구성할 때 사용하는 문법.
- JSX를 JavaScript 코드로 변환을 해주는것 → Babel
- Babel은 JSX를 JavaScript로 컴파일 해줌.
- React DOM은 그냥 DOM과 다르게 CSS와 JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다.
JSX 규칙
- 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주어야 함.
// 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 한다.
<div> // 이 div가 안의 2개의 div를 포함함.
<div>
<h1>Hello</h1>
</div>
<div>
<h2>World</h2>
</div>
</div>-
React에서 CSS class속성을 지정하려면 class가 아닌 className으로 표기해야 함.
<div className="abc">Hello</div> -
JSX에서 JavaScript를 쓰고자 한다면, 중괄호를 반드시 이용해야함. 사용하지 않을 시 일반 텍스트로 인식함.
function App() {
const name = 'kim';
return (
<div>
Hello, {name}!
// 중괄호를 이용한다면 Hello, kim!을 정상적으로 출력해주지만
// 중괄호를 사용하지 않는다면 Hello, name!을 출력하게 됨.
</div>
);
}-
React 엘리먼트가 JSX로 작성되면 반드시 대문자로 시작해야 함. 소문자로 시작할 경우 일반적인 HTML 엘리먼트로 인식함. (이렇게 대문자로 작성된 JSX 컴포넌트 → 사용자 정의 컴포넌트)
-
조건부 렌더링의 경우 삼항연산자를 이용해야 한다.
- JSX 내부의 JavaScript 표현식에서 if문을 사용할 수 없음.
- 그래서 JSX 밖에서 if문을 사용하여 사전에 값을 설정하거나, {}안에서 삼항연산자를 사용해야 함.{ 조건 ? true일 때 실행할 명령문 : false일 때 실행할 명령문 }
ex) { name === kim ? console.log('맞음') : console.log('아님') } -
React에서 여러 개의 HTML 엘리먼트를 표시할 때는 map() 함수를 사용. 반드시 JSX 속성 'key'를 넣어야 하는데, 넣지 않을 시 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됨.
- key 속성값은 가능하면 데이터에서 제공하는 id를 할당해야 함. key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문이다. 정 고유한 id가 없는 경우에만 배열 인덱스(최후의 수단)를 사용한다.
