React - 3장 : 컴포넌트

3-1. 컴포넌트를 선언하는 방식

- 컴포넌트를 선언하는 방식은 크게 두가지이고 클래스형과 함수형이 있다.

 

1) 클래스형 컴포넌트

- 클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에서 보여주어야 할 JSX를 반환해야 한다.

- state와 라이프사이클 API 사용이 가능하다.

- 임의 메서드를 정의가 가능하다.

 

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>;
  }
}
 
export default App;

 

2) 함수형 컴포넌트

- 클래스형 컴포넌트보다 선언하기가 훨씬 편하다.

- 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다.

- state와 라이프사이클 API사용이 불가능한데 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었다.

- 리액트 공식 매뉴얼에서 컴포넌트를 새로 작성할 때 함수 컴포넌트와 Hooks를 사용하도록 권장하고 있다.

 

import React from 'react';
import './App.css';
 
function App() {
  const name = '리액트';
  return <div className="react">{name}</div>;
}
 
export default App;

 

3-2. 컴포넌트 생성

1) 함수형 컴포넌트 작성

 

import React from 'react';
 
const MyComponent = () => {
  return <div>나의 새롭고 멋진 컴포넌트</div>;
};
 
export default MyComponent;

 

함수를 작성할 때  function 키워드를 사용하는 대신에 () => {} 화살표 함수 문법을 사용했다.

 

화살표 함수 문법
- ES6  문법에서 함수를 표현하는 새로운 방식
- 주로 함수를 파라미터로 전달할 때 유용
- this 값 비교
  -  function : 자신이 종속된 객체의 this를 가리킴
  -  arrow function : 자신이 종속된 인스턴스의 this를 가리킴

 

2) 모듈 내보내기 및 불러오기

- 내보내기 ( exprot )

  - 다른 파일에서 import 할 때 불러오도록 설정

  - export default App;

 

- 불러오기 ( import )

  - import App from './App';

 

3-3. props

1) 구성

- 컴포넌트 속성을 설정할 때 사용하는 요소

- 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정한다

- 자식 컴포넌트에서 props를 랜더링

- 함수를 파라미터로 받아 와서 사용한다.

- JSX내부에서 { } 기호로 감싸 주면 된다.

 

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent name="React" />;
};
 
export default App;

 <부모 컴포넌트>

 

import React from 'react';
 
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
 
export default MyComponent;

<자식 컴포넌트>

 

2) props 기본값 설정: defaultProps

- props값을 따로 지정하지 않았을 때 보여 줄 기본값을 설정

const MyComponent = props => {
  return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};

 

- MyComponent.defaultProps = { props 이름 : defalut 값} 을 입력하면 결과값으로 '기본 이름' 이 기본값으로 설정된다.

 

3) 태그 사이의 내용을 보여 주는 children

- 부모 컴포넌트 사이의 값을 자식 컴포넌트에서 호출 하고 싶을 때

 

<부모 컴포넌트>
const App = () =>{
    // 태그 사이의 값 '리액트'
    return <MyComponent>리액트</MyComponent>
}

<자식 컴포넌트>
const MyComponent = (props) =>{
    return <div>children 값은 {props.children}</div>
}

- 결과 값으로 children 값은  리액트 가 나온다.

 

3) 비구조화 할당 문법을 통해 props 내부 값 추출하기

- 객체에서 값을 추출하는 문법

- 키워드를 간소화하여 편하게 작성가능

 

import React from 'react';
 
 // props.name과 props.children 대신에 사용가능
const MyComponent = props => {
  ㅌ
  const { name, children } = props;
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

 

- 파라미터 부분에서도 사용가능

 

import React from 'react';
 
const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
  );
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

 

4) propsTypes를 통한 props 검증

- typescript처럼 props의 타입을 지정할 수 있다.

- 대규모 프로젝트위해 습관을 들여놓으면 좋을 것 같다.

 

//Proptypes를 import 해준다
import Proptypes from 'prop-types';

...(생략)

MyComponent.propTypes ={
    name: PropTypes.string
}

- 이렇게 설정해주면 name값은 무조건 문자열 형태로 전달해야 된다는 것을 의미한다. 

 

...(생략)


MyComponent.propTypes ={
    favoritNumber : PropTypes.number.isRequired
}

- propTypes 지정할때 뒤에 isRequired 를 붙여주면 favoriteNumber라는 숫자는 필수 props로 지정된다.

- type이 제대로 전달되지 않았을때에는 console창에 에러가 난다.

 

4) 클래스형 컴포넌트에서 props 사용하기

- render 함수에서 this.props 사용

 

render() {
    const { name, favoriteNumber, children } = this.props; // 비구조화 할당
    ...(생략)
  }
}

 

3-4. state

- 컴포넌트 내부에서 바뀔 수 있는 값

- 클래스형 컴포넌트에서는 state

- 함수형 컴포넌트의 useState (Hooks)

 

1) 클래스형 컴포넌트의 state

- 클래스형 컴포넌트에서 state를 설정할 때는 constructor(생성자) 메서드를 작성해야 한다.

- 생성자 메서드를 작성할 때는 반드시 super(props)를 호출 해야 한다.

- super(props)를 호출 하게되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 component 클래스가 지닌

  생성자 함수를 호출해준다. 

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    // state의 초깃값 설정하기
    this.state = {
      number: 0,
      fixedNumber: 0
    };
  }
}

 

- state의 값을 바꿀 땐 setState를 이용한다.

<button
onClick={() => {
// this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다.
this.setState({ number: number + 1 });
}}
>

 

 

- 이런식으로 하면 constructor 제거하고 간편하게 설정할 수 있다.

import React, { Component } from 'react';
 
class Counter extends Component {
  state = {
    number: 0,
    fixedNumber: 0
  };
  render() {
    const { number, fixedNumber } = this.state; // state를 조회할 때는 this.state로 조회합니다.
    return (...);
  }
}
 
export default Counter;

 

 

- this.setState는 비동기적으로 업데이트 된다.

- 두 번 호출하게도면 state가 동작하지않는다.

- 이를 해결하기 위해서는 객체 대신에 함수를 인자로 넣어 주면 된다.

- prevState는 기존 상태

- props는 현재 지니고 있는 props를 가리키므로 업데이트 과정에서 props가 필요하지 않으면 생략 가능하다.

<button
    this.setState((prevState, (props))=>{
    return {
        number: prevState.number + 1;
    }
})
></button>

 

- this.setState가 끝나고 콜백함수를 등록하여 작업을 처리 할 수 있다.

this.setState({
    number:number+1
}, ()=>{
    // 콜백함수
    }
)

 

2) 함수 컴포넌트에서 useState 사용하기

- 배열 비 구조화 할당 문법

const array = [1,2];
const one = array[0]
const two = array[1]

// 아래 코드와 동일하다.

const array = [1,2];
const [one, two] = array;

 

- useState 사용하기

  - const [현재 상태, 상태 바꿔주는 함수] = useState(state 의 초기값)

  - 값의 형태(숫자, 문자열,객체, 배열)는 자유 다 가능!!

  - 특정 이벤트 함수에 상태 바꿔주는 함수로 state값 변경가능

  - 여러 번 사용가능

 

import React, { useState } from 'react';
 
const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히 가세요!');
 
  const [color, setColor] = useState('black');
 
  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1 style={{ color }}>{message}</h1>
      <button style={{ color: 'red' }} onClick={() => setColor('red')}>
        빨간색
      </button>
      <button style={{ color: 'green' }} onClick={() => setColor('green')}>
        초록색
      </button>
      <button style={{ color: 'blue' }} onClick={() => setColor('blue')}>
        파란색
      </button>
    </div>
  );
};
 
export default Say;

 

3-5. state를 사용할 때 주의사항

- state 값을 바꿀 때 세터 함수를 사용해야 한다. 

- 그 이유는  객체의 데이터의 정확성과 일관성을 유지하기 위해 사용

- 배열이나 객체를 업데이트 하는 과정

  - 배열, 객체 사본을 만든다. ( spread 연산자를 사용 )

 

// 객체 다루기
const object = { a: 1, b: 2, c: 3 };
const nextObject = { ...object, b: 2 }; // 사본을 만들어서 b 값만 덮어 쓰기
 
// 배열 다루기
const array = [
{ id: 1, value: true },
{ id: 2, value: true },
{ id: 3, value: false }
];
let nextArray = array.concat({ id: 4 }); // 새 항목 추가
nextArray.filter(item => item.id != = 2); // id가 2인 항목 제거
nextArray.map(item => (item.id === 1 ? { ...item, value: false } : item)); // id가 1인 항목의 value를 false로 설정