컴포넌트
컴포넌트를 선언하는 방식은 두가지가 있다
- 클래스형 컴포넌트
- 함수형 컴포넌트
클래스형 컴포넌트
import React from 'react';
import './App.css';
class App extends Componet {
reder(){
const name = 'react';
return <div className="react">{name}</div>
}
}
export default App;- state 기능 및 라이프사이클 기능이 사용가능
- 임의 메서드를 정의 할 수 있다
- reder함수가 꼭 있어야하고 ⇒ 그안에 내용은 꼭 있어야함
그럼 뭐써야할까?
함수형이 더 좋음 ⇒ 선언도 쉽고, 기존 문제점을 Hooks 기능으로 해결
모듈 내보내기 = export
다른 파일에서 해당 파일을 불러올수(import) 있게 해줌
모듈 불러오기 = import
다른 파일을 가져옴
Props
컴포넌트 속성을 설정할때 사용하는 요소 이다
props 값은 부모 컴포넌트에서 설정(조작)한다.
JSX내부에서 props 렌더링
MyComponent.js
import React from 'react';
const MyComponet = props => {
return <div> 안녕하세요, 제이름은 {props.name} 입니다. </div>
};
exprot defalt MyComponent;(자식)컴포넌트에서 props를 name으로 설정할려면
⇒ {props.name} 이라 하면된다.
props를 지정하는 방법에는 여러 방법이 있다
대부분 비구조 할당을 배우고, 이는 뒤에서 다룬다
지금은 비구조 할당 ㄴㄴ 임 걍 정석
컴포넌트 사용할 때 props 값 지정하기
App.js
import React from 'react';
import MyComponet from './MyComponent'
const App = () => {
return <MyComponet name = "React" />;
};
exprot defalt App;그럼 (부모)컴포넌트에서 name = '값' 으로 props 값을 지정하면
(자식) 컴포넌트의 props.name 의 값이 결정된다
props 기본값 설정 : defaultProps
import React from 'react';
const MyComponet = props => {
return <div> 안녕하세요, 제이름은 {props.name} 입니다. </div>
};
MyComponet.defaultProps = {
name : '기본이름'
};
exprot defalt MyComponent자식 컴포넌트 안에
컴포넌트이름.defaultProps = {porps의 프로퍼티 : '기본값'};
을 해주면
기본값이 설정이 된다.
(부모)태그 사이의 내용을 보여주는 children
(자식)컴포넌트에서 {props.children}을 하면
⇒ 부모 태그 사이의 내용을 보여준다
비구조화 할당 문법을 통해 props 내부 값 추출 하기
비구조화 할당이란?
객체에서 값을 추출하는 문법
const ironMan = {
name: '토니 스타크',
actor: '로버트 다우니 주니어',
alias: '아이언맨'
};
const captainAmerica = {
name: '스티븐 로저스',
actor: '크리스 에반스',
alias: '캡틴 아메리카'
};
function print(hero) {
const text = `${hero.alias}(${hero.name}) 역할을 맡은 배우는 ${
hero.actor
} 입니다.`;
console.log(text);
}
print(ironMan);
print(captainAmerica);위 예시에서 값에 접근할때 계속 hero.~~를 해야하는 귀찮음이 있다
const ironMan = {
name: '토니 스타크',
actor: '로버트 다우니 주니어',
alias: '아이언맨'
};
const captainAmerica = {
name: '스티븐 로저스',
actor: '크리스 에반스',
alias: '캡틴 아메리카'
};
// ------ 방법 1 ------ //
function print(hero) {
const { alias, name, actor } = hero;
const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
console.log(text);
}
// ------ 방법 2 ------ //
function print({ alias, name, actor }) {
const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
console.log(text);
}
print(ironMan);
print(captainAmerica);이렇게 바꾸면 간단하다
즉
const { alias, name, actor } = hero;이 부분이 객체의 값들을 추출해서 새로운 상수에 넣어준다.
비구조화 할당법을 사용하면 겁내 깔끔하게 사용할수 있다
MyComponent.js(비구조화 활당법)
import React from 'react';
const MyComponet = ({name}) => {
return <div> 안녕하세요, 제이름은 {name} 입니다. </div>
};
MyComponet.defaultProps = {
name : '기본이름'
};
exprot defalt MyComponentpropTypes를 통한 props 검증
컴포넌트의 필수 props를 지정하거나, 타입을 지정할때
import React from 'react';
import PropTypes from 'prop-types';
const MyComponet = ({name}) => {
return <div> 안녕하세요, 제이름은 {name} 입니다. </div>
};
MyComponet.defaultProps = {
name : '기본이름'
};
MyComponet.propsTypes = {
name : PropsTypes.strting
};
exprot defalt MyComponent- import PropTypes from 'prop-types' 를 가져온다
- MyComponet.propsTypes = {
name : PropsTypes.strting
}; 를 설정해준다
(부모) 컴포넌트에서 설정할수있는 props 값은 string이여야함
isRequires를 사용하여 필수 propTypes 설정
propTypes을 지정하지 않을때 경고하는 메세지
- PropsTypes.strting 뒤에 .isRequired를 한다.
해당 props를 (부모) 컴포넌트에서 반드시 설정해야함
State(상태)
컴포넌트 내부에서 바뀔수 있는 값
즉, props는 부모 컴포넌트가가 설정하는 값이라, (자식) 컴포넌트는 props를 읽기전용으로만 써야하는데
(자식) 컴포넌트도 props를 변경할 수 있게 해준다.
종류
- 클래스형 컴포넌트가 지니고 있는 state
- 함수형컴포넌트의 useState 함수
클래스형 컴포넌트의 state
클래스형 컴포넌트에서 state를 설정할떈 constructor 메서드를 작성해서 설정한다
constructor(props) {
super(props);
this.state = {
number: 0
};
}- super(props)는 상위 클래스의 상속을 말하는데, 현재 해당 클래스형 컴포논트의 생성자 함수를 호출해준다
- this.state 값에 초기값을 설정해준다
render() {
const { number } = this.state;
return (
<div>
<h1>{number}</h1>
<button
onClick={() => {
this.setState({ number: number + 1 });
}}
>+1</button>
</div>
)
}- 현재 state를 조회 하기 위해 this.state를 설정해 조회한다
- 이벤트 설정 함수를 넣을땐 화살표 함수를 이용하고
- state의 상태를 바꿔주는건 setState로 동작하고 있다
즉, 클래스형 컴포넌트에는 1. constructor 설정(super,state초기값) 2. this.setsState로 동작 한다
state 객체 안에 여러 값이 있을때
- this.state 객체 안에 값을 추가하면 된다
state를 constructor에서 꺼내기
constructor 메서드를 사용하지 않고 state초기값을 설정할수있다
import React, { Component } from 'react'
export class Counter extends Component {
state = {
number: 0
};
render() {
const { number } = this.state;
return (
<div>
<h1>{number}</h1>
<button
onClick={() => {
this.setState({ number: number + 1 });
}}
>+1</button>
</div>
)
}
}
export default Counter- this를 사용하지 않고 state객체만 만든다
- 조회 방식은 똑같이 조회한다.
this.setState에 객체 대신 함수 인자 전달하기
this.setState는 상태가 비동기적으로 업데이트 된다 (바로바로 바뀌지 않음)
⇒ 객체 대신 함수를 넣으면 된다
this.setState((prevState, props) => {
return{
// 업데이트 내용
})- prevState는 기존 상태
- props는 현재 지니고 있는 props를 가르킨다.
- 값을 업데이트 하고 난뒤에 특정 작업을 하고 싶으면(콜백) props 에 화살표 함수 형태로 콜백을 넣어준다
함수형 컴포넌트에서 useState 사용하기
원래는 state를 사용할수 없었지만 Hooks를 이용해 가능하게 만듬
useState로 가능하다
사용방법을 논하기 전에 배열 비구조화 할당을 배워보자
배열 비구조화 할당이란?
객체 비구조화 할당이랑 비슷하다
즉, 배열 안에 들어있는 값을 쉽게 추출하는 방법이다
객체 구조화 할당법 처럼, 배열에도 사용가능한것이다 (위에 객체 비구조화 할당을 다시 보셈)
useState 사용하기
useState라는 함수를 이용해서,
- 첫번째 배열(state)와 두번째 배열(state를 동작하는 함수=세터)을 할당하는 방식이다
- useState에 전달하는 인자는 state의 초기값을 설정한다
- state의 값의 형태는 자유 롭다
import React, { useState } from 'react';
const Say = () => {
const [message, setMessage] = useState('');
const onClickEnter = () => setMessage('안녕하세요');
const onClickeave = () => setMessage('안녕히가세요');
return (
<div>
<button onClick={onClickEnter}> 입장 </button>
<button onClick={onClickeave}> 퇴장 </button>
<h1>{message}</h1>
</div>
)
}
export default Say;- useState는 여러번 사용해도 괜찮다
state를 사용할때 주의 사항
state값을 바꾸는건 세터 함수여야함(두번째 배열)
그렇담 배열이나 객체를 업데이트 해야하는 경우는 어떻게 해야할까?
⇒ 배열이나 객체를 사본으로 저장한뒤 그 사본을 세터함수로 업데이트한다
