리액트 기초반 2주차(1)

가상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

GitHub - 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

[TIL] SCSS 문법 정리 🍎

 

css 길이 단위

https://webclub.tistory.com/356

CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch