개발의변화
리액트 컴포넌트 본문
1. 클래스형 컴포넌트
자바스크립트 ES6 문법 클래스 개념이 들어오면서 클래스형 컴포넌트 사용 가능
클래스형 컴포넌트에선느 render함수가 있어야 하고 그 안에서 보여 주어야 할 JSX를 반환해야한다.
2.함수형 컴포넌트
클래스형 컴포넌트보다 선언하기가 편함, 메모리 자원도 클래스형 컴포넌트보다 덜 사용합니다. 프로젝트 완성하여 빌드한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작다.
단점 : state와 라이프사이클 API의 사용이 불가능 이것은 HOOKS로 대체 가능
화살표 함수: 이 문법은 주로 함수를 파라미터로 전달할 때 유용하다
3. 모듈 내보내기 불러오기
내보내기 : export default Mycomponent;
불러오기 import React from 'react';
중요! props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 것 props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌틍에서만 설정할 수 있다.
import logo from './logo.svg';
import './App.css';
import MyComponent from './MyComponent';
function App() {
const name = "안녕"
return (
<div>
<MyComponent name = {name}/>
</div>
);
}
export default App;
이렇게 Mycomponent 컴포넌트에 name = {name}을 통해 name 값을 전달해주면
import React from 'react'
const MyComponent = (props) => {
return(
<div>
안녕! 내 이름은{props.name}
</div>
)
}
export default MyComponent;
MyComponent에서 props로 받아와 props.name을 이용해서 값을 이용 할 수 있다.
props 기본값 설정: defaultProps
MyComponent컴포넌트에
MyComponent.defaultProps = {
name: "기본 이름"
}으로 설정하면
name을 app.js에서 안 받았을 때 defaultProps에 있는 값으로 대체된다.
State 중요! 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값
컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려면 컴포넌트에서 바꾸어 주어야 한다.
리액트에는 두 가지 종류의 state가 있다. 하나는 클래스형 컴포넌트가 지니고 있는 state, 하나는 함수형 컴포넌트에서 useState함수
사용하는 state입니다.
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
number: 0
};
}
render() {
const {number} = this.state; //state로 조회
return (
<div>
<h1>{number}</h1>
<button
onClick = {()=> {
this.setState({number: number+1});
}}>
+1
</button>
</div>
);
}
}
export default Counter;
setState를 통해 number를 변화시킬 수 있다.
state 객체 안에 여러 값이 있을 때
state 객체 안에는 여러 값이 있을 수 있다. counter 컴포넌트를 다음과 같이 수정
할 수 있다.
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
number: 0,
fixedNumber: 0
};
}
render() {
const {number,fixedNumber} = this.state; //state로 조회
return (
<div>
<h1>{number}</h1>
<h2>바뀌지 않은 값: {fixedNumber}</h2>
<button
onClick = {()=> {
this.setState({number: number+1});
}}>
+1
</button>
</div>
);
}
}
export default Counter;
fixedNumber를 this.state에 프로퍼티로 하나 추가 해주면 된다
this.setState가 끝난 후 특정 작업실행하기
중요! 함수형 컴포넌트에서 state사용하기
useState 덕분에 16.8 버전 이후부터 함수형에서 사용가능
포인트! 배열 비구조화 할당
Hooks를 사용하기 전에 배열 비구조화 할당 , 배열 비구조화 할당은 이전에 배운 객체 비구조화 할당 비슷
const array = [1,2]
const one = array[0]
const two = array[1]
==> const array = [1.2]
const [one,two] = array;
useState함수의 인자에는 초깃값을 넣어 주어야 한다.
값의 형태가 숫자일 수도, 배열, 객체 , 문자열 등 상관없다
함수를 호출하면 배열 반환
[message=현재상태,setMessage=상태를 바꾸어 주는 함수] = useState
import React, { useState } from 'react'
const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('안녕하세요!');
const onClickLeave = () => setMessage('안녕히 가세요!');
return (
<div>
<button onClick={onClickEnter}>입장</button>
<button onClick={onClickLeave}>입장</button>
<div>{message}</div>
</div>
)
}
export default Say;
useState는 한 컴포넌트에서 여러 번 사용해도 상관없다
함수형이든 클래스형이든 setSTate 혹은 upState를 통해 활용해야한다
객체에 대한 사본을 만들 때는 spread 연산자라 불리는 ..dmf tkdydgkrh cjflgksek.