💡 컴포넌트로 코드를 줄이자!
Component
- 리액트의 핵심 개념이며, Virtual DOM의 핵심이기도 하다.
- React는 컴포넌트 단위로 페이지 새로 고침이 가능하며, 리소스 절약이 가능하고, 사용자에게 부드럽고 빠른 경험을 제공한다.
- 독립적으로 구성하여 재사용이 편리하다.(독립적인 코드 덩어리)
- 데이터는 속성(props)으로 받고, 상태(state)에 따라 View를 변화한다.
- 즉, 쇼핑몰에서 상품 목록 페이지를 하나하나 다 그려줄 필요 없이 하나의 컴포넌트만 만들고 변화되는 데이터만 props 로 전달하여 재사용하면 된다.
💫 반드시 변수명이나 컴포넌트는 PascalCase로 변경해야한다.
(파일명, 컴포넌트명은 모두 MainHeader 이런식으로 작성)
Component의 종류
- 클래스형
- 메모리자원을 더 먹고, 느리다는 단점
- render 라는 함수를 사용해야만 그릴 수 있다. render 뒤에 어떤 view를 보여줄지 작성
- 함수형 컴포넌트에게 완전히 밀렸다. 요즘 잘 사용하지않음.
- render 뒷부분에 변수 선언을 해야한다. 그리고 return값으로 내가 화면에 나타내려는 것을 지정해야함.
import React, { Component } from 'react'
import logo from '../logo.svg'
export default class Test2 extends Component {
render() {
const style= {
color: 'orange',
fontSize: '40px',
marginTop:'20px',
};
return (
<div style={style}>
<h2>안녕하세요</h2>
<img src={logo}></img>
</div>
)
}
}- 함수형
- 클래스에 비해 구조와 코드가 단순하다.
- 메모리를 덜 먹고 빠름. render함수가 빠짐.
- 컴포넌트는 꼭 파일로 분리할 필요는 없다. 컴포넌트는 말그대로 함수 또는 클래스이므로 하나의 컴포넌트 내부에서도 선언하여 편하게 사용하면 된다.
State
- 컴포넌트에 대한 상태를 의미하며, 매우 특수한 기능을 하는 변수라고 생각하면 된다.
- 사용하는 이유는 ? state가 변경되면 해당 컴포넌트는 바로 다시 렌더링이 되기 때문에 컴포넌트의 유동성 관리가 쉽다. 즉, 변동 시 자동으로 html 에 반영되게 만들고 싶기때문에! (자주 변경될 것 같은 html부분은 state사용하면됨)
State 와 변수
변수는 리랜더링 되기때문에 초기화된다.
유의사항!
- 객체 또는 배열을 State 로 사용
- 자주 값이 변경되고, 변경 사항을 바로바로 보여줘야한다면 state로 선언해서 쓰자
- 배열 또는 객체로 쓰기 보다는 하나의 원시 값으로 쓰는 것이 좋다.
- 배열 또는 객체로 사용해야한다면, JS의 객체 타입 데이터의 특성을 잘 생각해서 사용하자
state의 작동원리: 이전 state값과 현재 state값을 비교해서 두값이 다르면 리랜더링함
ㄴ> 원시타입의 자료형과 객체타입이 다르니 새로운 배열을 만들어주어야한다.
Props
다양한 데이터는 props라는 객체 하나로 받아서 사용이 가능하다.
아래와 같이 구조분해할당 문법도 가능 !
import React from 'react'
export default function ListChild(props) {
const {title, content} = props;
return (
<div>
<h2>{title}</h2>
<p>{content}</p>
<hr/>
</div>
)
}아래는 ListChild 라는 부모 컴포넌트를 가져와 사용한다.
import React from 'react'
import ListChild from './ListChild';
import Modal from './Modal';
export default function List () {
return (
<div>
<h1>오늘 해야할 일</h1>
<hr />
<Modal />
<ListChild title="리액트 공부하기" content = "state 사용법익히기"/>
<ListChild title="뷰 공부하기" content = "정복하기"/>
<Modal />
</div>
)
}🍀 ustState
- 함수형 컴포넌트에서 사용하는 useState
import { useState } from 'react';
const [스테이트이름, 스테이트변경함수] = useState(초기값);상태를 관리하는 state를 배열의 첫번째로 지정해주고, 해당 state를 변경할 수 있는 함수를 두번째로 지정해주면 된다.
그리고 useState의 ( ) 안에는 state 의 초기값을 넣어준다.
useSate는 한 컴포넌트에서 여러번 사용해도 된다.
import { useState } from 'react';
import './App.css';
function App() {
const [teacher, setTeacher] = useState('안나');
return (
<div className="App">
<button onClick={() => setTeacher('anna')}>영어로!</button>
<br />
<span>{teacher}</span>
</div>
);
}
export default App;