ZeroCho님의 리액트 기초 강의(무료)를 듣고 정리한 내용입니다.
기본강좌 1
1. React.createClass -> Class -> Hooks 로 변화
-
Hooks는 2018년 10월 쯤 등장. 기존 클래스형 컴포넌트를 대체하는 함수형 컴포넌트. Facebook에서 표준으로 밀고 있는 최신 기술.
-
2019년 상반기까지는 99%가 클래스형 컴포넌트로 구축된 애플리케이션이기 때문에
클래스형 컴포넌트와 함수형 컴포넌트 둘 다 알아둬야 함.
2. 리액트를 사용하는 이유
-
SPA(Single Page Application) 구현으로 사용자 경험을 개선하기 위해(새로고침(화면 깜빡임)없이 모바일 어플처럼 부드럽게 페이지가 넘어감). 웹보다는 앱이 사용자 경험이 좋다. 리액트를 이용하면 앱 수준의 사용자 경험을 웹에서 구현할 수 있음.
-
데이터 처리 용이성 : Facebook이 리액트를 만든 이유 - Facebook은 단일 웹사이트 중 전세계에서 규모가 가장 큰 웹사이트. 제이쿼리 등의 기존 프레임워크로는 방대한 양의 데이터 화면 연동 처리(데이터와 화면의 싱크로나이징)가 힘듦.
이러한 데이터-화면 연동과 데이터 처리를 쉽게 하기 위해 페이스북이 만든 라이브러리(프레임워크)이기 때문에 데이터 처리가 용이하다는 장점이 있다.
-
웹사이트에는 템플릿은 같고 컨텐츠만 다르게 중복되는 요소가 매우 많음. 중복되는 코드가 많으면 유지보수가 힘들어지고 코드 가독성이 안 좋음. 중복되는 요소를 ‘컴포넌트화’해서 중복을 피할 수 있도록 한다.
=> 정리 : 사용자 경험 개선, 데이터와 화면 연동(싱크로나이즈)이 좋아짐, 중복되는 요소들을 컴포넌트화 시켜 유지보수성 개선
기본강좌 2
-
리액트 : 자바스크립트. js파일로 작성함.
-
웹팩 : 쪼개진 자바스크립트 파일들을 다음과 같이 html이 인식할 수 있도록 하나의 파일로 합쳐준다.
<html> <head></head> <body> <script src=“like_button.js”></script> </body> </html> -
React.createElement 메소드를 이용해 HTML Element를 생성하는 코드를 LikeButton 클래스의 render() 메소드 반환값으로 작성한다.
```html <div id=“root”></div> <script> const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); } render() { return e(‘button’, { onClick: () => { console.log(clicked); }, type: ‘submit’ }, ‘Like’); } } ```
기본강좌 3
-
html 속성 : javascript에서는 camel표기법으로 표기
(Ex: onclick -> onClick) -
상태(state) : 바뀌는 부분, 바뀔 수 있는 부분
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = {
liked: false,
};
}
render() {
return e(
‘button’,
{{ onClick: () => { this.setState({ liked: true })},
type: ‘submit’ },
this.state.liked === true ? ‘Liked’ : ‘Like’,
);
}
}-
React.createElement 대체하기 -> JSX 사용 (Javascript + XML)
-
JSX : html이 아닌 xml. 닫는 괄호 필수. 문법이 html보다 엄격하다.
render() {
return <button type=“submit” onClick={() => { this.setState({ Liked: Tre })}>Like</button>;
}
}
ReactDOM.render(<LikeButton />, document.querySelector(‘#root’));-
Bebel을 사용해서 JSX 문법을 createElement와 같은 기존 문법으로
변환해준다. -
Bebel : 실험적인 문법, 최신 문법의 자바스크립트를 모든 브라우저에서 돌아가는 표준 문법으로 변환해준다.
-
대문자로 시작하는 태그 : 리액트 컴포넌트
소문자로 시작하는 태그 : html 태그
