왜 리액트와 같은 프론트엔드 라이브러리를 사용하는가?
보통의 경우 웹 페이지를 구성하는데 있어서 html과 css 혹은 JS를 사용하였는데, 더 나아가 react나 view와 같은 프론트엔드 라이브러리도 사용 할 수 있다.
오늘 날의 웹 페이지는 정적으로 보여주기만 하는 것이아니라 유저들과 페이지는 수 많은 인터렙션이 발생하게 되고 그 때마다 수 많은 상태관리가 필요합니다.
기존 DOM의 환경에서는 사용자가 배경 이미지 바꾸기 버튼을 눌렀다면
1. 바꿀 이미지를 DOM을 이용하여 찾고
2. 이미지 DOM의 소스를 바꿀 이미지로 바꾸고
3. 다시 바뀐 이미지를 띄어준다.
하지만 관리 해야할 DOM이 수 천가지라면????
이것을 효과적으로 관리하기 위해
React, view .. 등의 라이브러리가 나오게되었다.
그 중 REACT는 component라는 하나의 의미를 가진 독립적인 모듈 단위를 사용한다.
쉽게 말하면? => 나만의 독립적인 HTML 태그
<Apple />
<cake />
*실제 존재하지 않지만 나만의 독립적인 html태그를 만들 수 있다.또한, 중복적인 기존 DOM 부분을 이 컴포넌트를 통해 해결할 수 있다.
=> 직관적이며 재사용성이 높아짐.
React에서는 즉 이 컴포넌트 단위로 개발이 이루어진다.
React는 기본적으로 ES6를 사용한다.
ES6 중 필수로 알고 가야할 것 6가지
- Destructuring
- spread operator
- rest parameters
- default parameters
- template literals
- arrow function
- for-of loop
JSX란?
우리가 react로 작성한 컴포넌트들을 화면에 보여주기 위해서 사용한다.
항상 react에서는 JSX를 리턴해 줘야함.
return (
<div>
<h1> hello react </h1>
</div>
)JSX는 html이 아니라 js의 확장 문법임.
만약 JSX가 없다면?
-
React.createElements('header', {className:'App-container'} ...);
-
React.createElements('p', {className: 'body' ... };
태그를 쓸 때마다 이 미친짓을 계속해야함 (복잡도 ⬆️ 가독성 ⬇️)
만약 JSX가 있다면?
<header className = 'App-container'>... </header>
<p> ... </p>끝
원리는?
JSX문법을 사용하여 작성하면 바벨이 다시 위와 같은 코드로 변환을 해준다..
JSX 사용시 주의할 점
- 반드시 하나의 엘리먼트로 감싸야 한다.
<div>
<div>
<h1>... </h1>
</div>
<div>
<h1>... </h1>
</div>
</div>- 자바스크립트 코드를 적용할 땐 { }안에 작성한다.
render() {
const name = "jack";
return {
<div>
hello {name}
</div>
}
}- JSX 내부에선 if문을 사용할 수 없기 때문에 IIFE or 삼항연산자 사용해야한다.
<div>
{
(1 + 1 === 2) ? (<h1>정답</h1>) : (<h1>탈락</h1>)
}
</div>- 엘리먼트의 클래스 이름을 적용할 땐, className을 사용(ES6 문법 중에 이미 class를 사용 중이기 때문에)
<div class="" >
nope!
<div className="">
아래의 질문에 답변해 보자.
면접이리고 생각 !
React 기본
- React를 이용한 컴포넌트 단위 개발의 장점을 이해할 수 있다.
- JSX와 같이 선언적인 형태의 문법을 사용하는 것의 장점을 이해할 수 있다.
React 주요 개념과 사용법
- 함수 컴포넌트와 클래스 컴포넌트를 만드는 방법과 차이를 이해할 수 있다.
- props의 특징과 규칙을 이해할 수 있다.
- props와 state와의 차이점을 이해할 수 있다.
- 상태 변경 방법과, 그 이유를 이해할 수 있다.
- 이벤트를 처리할 수 있다.
- lifecycle을 통해 작동 원리를 이해할 수 있다.
- React 컴포넌트 간 데이터 흐름 및 상호작용의 원리를 이해할 수 있다.
API 문서 연습
1. React 공식 문서를 활용할 수 있다.
React를 구성하는 JavaScript 생태계
1. Create React App을 구성하고 있는 babel 및 webpack의 목적과 필요성을 이해할 수 있다.
