리액트 2주차
리액트의 동작 방식에 대해 배운다
컴포넌트
리액트는 조각 조각들을 모아서 웹페이지 하나를 완성하는데 이 조각 조각들을 컴포넌트(Component)라고 부른다.
라이프 사이클이란?
컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 말한다.
라이프 사이클은 크게 생성 / 수정 / 삭제 로 나뉜다.
수정되는 경우들
- 컴포넌트 자신의 데이터state가 바뀌었을 때
- 부모가 나한테 주는 데이터 props가 바뀌었을 때
- 부모가 리렌더링 되었을 때
- 강제 업데이트를 일으켰을 때
가상돔
👉 DOM : HTML 단위 하나하나를 객체로 생각하는, 트리구조를 갖고 있는 모델
왜 쓰는가?
OM트리 중 하나가 수정될 때마다 DOM을 찾고, 수정하고를 하게되면 필요없는 연산이 너무 많이 일어나기 때문에 이를 막기위해 사용
동작방식
모리에 가상DOM에 변경사항을 전부 다 넣고 진짜 DOM과 비교하여 바뀐 부분만을 변경해준다.
=> 이 때 render가 진행된다.
진짜 DOM은 페이지에 처음 진입했을 때와 가상돔을 이용해 데이터가 변경 될 때 나타난다.
2강
클래스형 컴포넌트 함수형 컴포넌트가 있다.
2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서 함수형 컴포넌트와 훅을 함께 사용할 것을 권장하고 있다.
근데 왜 클래스형 컴포넌트를 배우는가?
여기선 클래스형 컴포넌트를 알아듣고 수정할 수 있을 정도로 알아두기 위해 배운다.
라이프 사이클 함수는 클래스형 컴포넌트에서만 사용할 수 있다.
어떤 것(요소)이 바뀌느냐는 render의 return에 포함되어 있다.
이 요소들이 가상돔에서 실제 돔으로 올라가면 수정(업데이트)가 완료된 것
3강
컴포넌트 (Component)
리액트는 컴포넌트를 잘 나누는 것도, 잘 쌓아올리는 것도 중요하다.
컴포넌트가 쓰는 데이터 Props, State
Props
- 부모로부터 받아온 데이터
A라는 부모와 B라는 자식이 있다.
A가 B에게 데이터를 주면 이 데이터는 B에게 props가 되는 것
props는 수정이 불가능하다.
State
- 내 데이터, 컴포넌트 자체의 데이터
- 수정, 생성이 자유롭다.
4강
export와 import
export default의 경우 중괄호가 필요 없지만
그냥 export만 쓸 경우엔 중괄호가 필요하다
export {BucketList};import {BucketList} from "./BucketList"
export default BucketList;
import BucketList from './BucketList';
5강
함수형 컴포넌트를 클래스형 컴포넌트로 바꾸기
// 클래스형 컴포넌트
class App extends React.Component{
// 초기화 해 줄 초기화 함수가 필요, 생성자
constructor(props){
super(props);
this.state = {
list: ["영화관 가기", "강의 듣기", "카페 가기"],
}
}// 돔에 표현되기 위해서 render를 만들어준다. JSX에선 1개 이상의 리턴 값이 필수
render () {
console.log(this.state.list)
return (<div className="App"> {/* 자바스크립트 변수는 중괄호를 사용 */} <BucketList list={this.state.list} /* <= props명과 넘겨줄 데이터 *//> </div> )}
}
// 함수형 컴포넌트
function App() {
return (<div className="App"> <BucketList/> </div>);
}
7강
React에서 CSS 사용하기
마진 병합 상쇄 현상
자식 요소가 display: block; 값을 가지고 있을 때 이 요소의 margin이 부모 요소의 margin처럼 보여지는 현상을 마진 병합 상쇄 현상이라고 한다.
이 때 부모 요소를 display: block이 아니게 두면 된다.
height: vh; > 화면 비를 기준으로 높이를 설정하는 값이다.
width: vw; > 화면 비를 기준으로 넓이를 설정하는 값이다.
display: flex; > flex를 먹인 요소의 자식 요소가 자기가 갖고 있는 컨텐츠의 사이즈 만큼만 차지한다.
8강
styled-component 패키지 문법 익히기
// 첫 글자는 대문자로
const MyStyled = styled.divwidth: 50vw; min-height: 150px; background-color: ${(props) => (props.bg_color)};백틱 (``) 안에서 ${} 사용할 수 있음
{(props) => {
return props.bg_color;
}}삼항 연산자 사용가능
${(props) => (props.bg_color? "red" : "purple")}
10강 - 리액트에서 돔요소 가져오기
다시 한 번 듣기
getElementById 와 appendChild는 진짜 DOM을 건드린다.
이 때 가상돔에는 있지만 실제돔에 없는 경우라면 당연히 에러가 뜨는데 그래서 DOM요소를 가져올 때 사용하는 것이 Ref
Ref는 '이름표'라고 생각
함수형 컴포넌트에선 라이플 사이클 메서드를 쓸 수 없어서 리액트 훅을 사용한다.
