리액트 기초반 2주차(1)
2022. 1. 29. 00:49ㆍ코딩공부/React
가상DOM
DOM은 html 단위 하나하나를 객체로 생각하는 모델입니다. 트리 구조
- DOM 트리 중 하나가 수정될 때마다 모든 DOM을 뒤지고, 수정할 걸 찾고, 싹 수정을 한다면 필요없는 연산이 너무 많이 일어납니다. 그래서 가상돔이 등장!
- 가상돔은 메모리 상에서 돌아가는 가짜 DOM입니다.
- 가상돔의 동작 방식: 기존 DOM과 어떤 행동 후 새로 그린 DOM(가상 돔에 올라갔다고 표현합니다)을 비교해서 정말 바뀐 부분만 갈아끼워줍니다! → 돔 업데이트 처리가 정말 간결하죠!
진짜 DOM을 새로 그리는 시점
- 처음 페이지 진입했을 때도 그리겠죠!
- 데이터가 변했을 때도 그릴 겁니다!
라이프 사이클
컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지가 라이프 사이클이에요.
- 컴포넌트는 생성(마운트)되고 → 수정(업데이트)되고 → 사라집니다(언마운트).
- 생성은 처음으로 컴포넌트를 불러오는 단계입니다.
- 수정(업데이트)는 사용자의 행동(클릭, 데이터 입력 등)으로 데이터가 바뀌거나, 부모 컴포넌트가 렌더링할 때 업데이트 됩니다. 아래의 경우죠!
- props(부모가 자식한테 주는 데이터)가 바뀔 때
- state(컴포넌트 스스로 가지고있는 데이터)가 바뀔 때
- 부모 컴포넌트가 업데이트 되었을 때(=리렌더링했을 때)
- 또는, 강제로 업데이트 했을 경우! (forceUpdate()를 통해 강제로 컴포넌트를 업데이트할 수 있습니다.)
- 제거는 페이지를 이동하거나, 사용자의 행동(삭제 버튼 클릭 등)으로 인해 컴포넌트가 화면에서 사라지는 단계입니다.
라이프 사이클 함수
import React from "react";
// 클래스형 컴포넌트는 이렇게 생겼습니다!
class LifecycleEx extends React.Component {
// 생성자 함수
constructor(props) {
super(props);
this.state = {
cat_name: '나비',
};
console.log('in constructor!');
}
changeCatName = () => {
// 다음 강의에서 배울, state 업데이트 하는 방법입니다!
// 지금은 componentDidUpdate()를 보기 위해 쓰는 거니까, 처음보는 거라고 당황하지 말기!
this.setState({cat_name: '바둑이'});
console.log('고양이 이름을 바꾼다!');
}
componentDidMount(){
console.log('in componentDidMount!');
}
// 화면에 나타나는 것을 Mount한다라고 한다.
// DOM에 다 완벽하게 올라간 다음에 실행된다.
// 업데이트 될때 실행되지 않고 맨처음 랜더링할때 한번만 실행됨.
// 보통 여기에 Ajax라던지 이벤트리스너가 들어간다.
// 이미 가상돔이 실제돔으로 올라간 후니까 DOM 관련 처리를 해도 된다.
componentDidUpdate(prevProps, prevState){
console.log(prevProps, prevState);
// 이전에 가지고있던 props하고 이전의 State를 보여준다
// 여기서는 prevProps는 부모한테 받은것이 없으니까 없고,
// prevState인 cat_name: '나비'를 보여준다.
console.log('in componentDidUpdate!');
// componentDidMount가 최초 랜더링이 끝난 다음에 호출이 되는 것이였으면
// componentDidUpdate는 리랜더링이 끝난 다음에 오출이 되는 함수다.
// 현재데이터와 이전데이터를 비교해야 하는 일이 있다면 여기서 비교!
// DidMount와 마찬가지로 가상돔이 실제돔에 올라간 후라서 DOM처리 가능
}
// 컴포넌트가 화면에서 완전히 사라지기 직전에 실행되는 라이프사이클
componentWillUnmount(){
console.log('in componentWillUnmount!');
}
// 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
render() {
console.log('in render!');
// 진짜 돔으로 올라갈거야!
return (
<div>
{/* render 안에서 컴포넌트의 데이터 state를 참조할 수 있습니다. */}
<h1>제 고양이 이름은 {this.state.cat_name}입니다.</h1>
<button onClick={this.changeCatName}>고양이 이름 바꾸기</button>
</div>
);
}
}
export default LifecycleEx;
컴포넌트
리액트는 레고, 컴포넌트는 블록
Component는 웹 사이트의 조각이고, 우리는 이 조각을 모아서 웹사이트에 뿌려준다.
웹 사이트를 잘 조각낼 줄 아는 사람 === 리액트를 잘 쓰는 사람
State와 Props
state는 Component가 가지고 있는 데이터
- state는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터입니다.
- 생성도 수정도 오직 해당 컴포넌트 내에서만 이뤄집니다. 내꺼니까 생성도 수정도 자유롭죠!
props는 Component가 부모 Component로부터 받아온 데이터
Props로 받은 데이터는 수정할 수 없다! 남의 것이니까!
함수형 컴포넌트와 클래스형 컴포넌트 비교
https://github.com/GAHYUN-P/reactprac2
Styled-components
yarn add styled-components
styled-components란 CSS-in-JS 라이브러리중 하나
컴포넌트에 스타일을 직접 입히는 방식
장점
- class 이름 짓기에서 해방됩니다!
- 컴포넌트에 스타일을 적기 때문에, 간단하고 직관적입니다!
- sass문법 사용 가능(네스팅 기능)
https://velog.io/@dosilv/TIL-SCSS-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC
css 길이 단위
https://webclub.tistory.com/356
'코딩공부 > React' 카테고리의 다른 글
리액트 기초반 3주차(1) (0) | 2022.02.01 |
---|---|
리액트 기초반 2주차(2) (0) | 2022.01.31 |
리액트 기초반 1주차(3) (0) | 2022.01.28 |
코딩앙마 React JS state, useState (0) | 2022.01.25 |
코딩앙마 React Js 이벤트 처리 (0) | 2022.01.24 |