[URECA] Day 46 React 컴포넌트

컴포넌트를 선언하는 방식

1. 함수 컴포넌트

import React from 'react';

const TTest = () => {
    return (
        <div>
            
        </div>
    );
};

export default TTest;

 

2. 클래스형 컴포넌트

import React, { Component } from 'react';

class TTest extends Component {
    render() {
        return (
            <div>
                
            </div>
        );
    }
}

export default TTest;

 

render 함수가 꼭 있어야한다. → 그 안에 보여줘야할 JSX를 반환한다. 

 

함수 컴포넌트와 클래스형 컴포넌트의 차이점

클래스형 컴포넌트의 경우 이후 배울 state 기능 및 라이프 사이클 기능을 사용할 수 있다

임의의 메서드를 정의할 수 있다. 

 

🤔 그러면 둘 중에 어떤걸 사용해야할까?

 

함수 컴포넌트 장점 👍🏻

✔️ 선언하기 편리

✔️ 메모리 자원도 덜 사용

✔️ 프로젝트 완성하고 빌드 한 후 배포할 때 함수 컴포넌트 사용이 결과물 파일 크가 작다.

 

함수 컴포넌트 단점 👎🏻

✔️ state와 라이프사이클 API 사용 불가 → Hooks 기능에서 해결

 

⭐ 리액트 공식 매뉴얼에서는 컴포넌트 작성시 함수 컴포넌트와 Hooks 사용하도록 권장

---

컴포넌트 생성

파일 만들기

⬇️

코드 작성하기

⬇️

모듈 내보내기 및 불러오기

 

MyComponent.js 파일 생성

import React from 'react';

// (props) ← 자식요소에서 props를 받겠다는 뜻
const MyComponent = (props) => {
  return (
    <div>
      <h1>나의 새롭고 멋진 {props.name} 컴포넌트</h1>
    </div>
  );
};

// 모듈 내보내기
export default MyComponent;

 

props

properties의 줄임말이다. 컴포넌트 속성을 설정할 때 사용하는 요소
(props) ← 자식요소에서 props를 받겠다는 뜻

 

// 모듈 불러오기
import './App.css';
import MyComponent from './MyComponent';

function App() {
  return (
    // 여기도 가능 가장 큰 부모요소부터 중괄호 주석 사용
    <div>
      <MyComponent name="토마토" />
    </div>
  );
}

export default App;

코드를 저장하고 브라우저에서 확인하면 "나의 새롭고 멋진 토마토 컴포넌트"로 렌더링되었다.

---

props 기본 값 설정: default Props

import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      <h1>나의 새롭고 멋진 {props.name} 컴포넌트</h1>
    </div>
  );
};

MyComponent.defaultProps = {
  name: '기본 이름',
};

export default MyComponent;

MyComponent.defaultProps에서 name:'기본 이름'을 입력하면 화면에 기본 이름 컴포넌트로 나와야하는데 안나온다.

그 이유는 무엇일까? 예전 방식으로 defaultProps는 함수방식에서 더 이상 쓰이지 않는다. → 지원하지 않는다.

 

🤔 그러면 사용하고 싶은데 어떻게 해야할까?

 

방법 1

<div> 나의 멋진 새로운 {props.name || '하이'} </div>

 

방법 2

const MyComponent={{name="하이", children}} // 비구조화 할당

 

⬇️ 비구조화 할당(Destructuring Assignment) 설명 ⬇️

비구조화 할당이란?

const user = { name: "솔리", age: 25 };

// 비구조화 할당
const { name, age } = user;

console.log(name); // "솔리"
console.log(age);  // 25

const { name, age } = user;

👉 user 객체에서 name과 age 속성을 꺼내서 같은 이름의 변수에 저장하는 과정

 

나의 코드

const MyComponent = ({ name = "하이", children }) => { ... }

코드에서 ({ name = "하이", children }) 부분이 바로 비구조화 할당이다.

• name과 children을 직접 꺼내서 사용
• name이 전달되지 않으면 기본값 "하이"를 사용

 

🤔그렇다면 구조화란 뭘까?

구조화

하나의 객체 또는 배열로 묶는 과정

 

1. 객체로 구조화

const name = "솔리";
const age = 25;

// 객체로 구조화
const user = { name, age };

console.log(user);
// { name: "솔리", age: 25 }

👉 name과 age 변수를 user 객체 안에 묶었다.

 

2. 배열로 구조화

const item1 = "사과";
const item2 = "바나나";

// 배열로 구조화
const fruits = [item1, item2];

console.log(fruits);
// ["사과", "바나나"]

👉 개별 변수를 배열에 넣어서 구조화

 

💡 비구조화 할당 vs. 구조화

• 구조화: 데이터를 하나의 객체나 배열로 묶는 것
• 비구조화: 객체나 배열에서 개별 값을 꺼내는 것

// 구조화 (객체 생성)
const user = { name: "솔리", age: 25 };

// 비구조화 할당 (객체에서 값 추출)
const { name, age } = user;

---

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

import React from 'react';

const MyComponent = (props) => {
  return (
    <div>
      <h1>나의 새롭고 멋진 {props.name || ' 리액트'} 컴포넌트</h1>
      <h2>children 값은 {props.children}</h2>
    </div>
  );
};

// 예전 방식이어서 작동 x
// MyComponent.defaultProps = {
//   name: '기본 이름',
// };

export default MyComponent;

 

🗣️ props의 역할은 뭐라고?

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여준다. 

 

import './App.css';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent>칠드런</MyComponent>
    </div>
  );
}

export default App;

---

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

props 값을 조회할때마다 props.name, props.children과 같이 props라는 키워드를 앞에 붙여주고 있다. 

함수 컴포넌트에서 props를 사용해 파라미터 부분에서 비구조화 할당 문법을 사용했다. 

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({ name = '진짜 리액트', children }) => {
  // const (name, children) = props;
  return (
    <div>
      <h1>나의 새롭고 멋진 {name} 컴포넌트</h1>
      <h2>children 값은 {children}</h2>
    </div>
  );
};

MyComponent.propTypes = {
  name: PropTypes.string,
};

export default MyComponent;

 

proTypes를 통해 props 검증할 수 있다.

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes을 사용한다.

propTypes도 역시 import 구문으로 불러와야한다.

name은 무조건 string 형태로 전달되야한다. 

import './App.css';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
     <MyComponent name={42}>칠드런</MyComponent> 
    </div>
  );
}

export default App;

---

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

한번 더 설명!  rcc를 입력하면 

import React, { Component } from 'react';

class MyComponentClass extends Component {
  render() {
    return <div></div>;
  }
}

export default MyComponentClass;

 

자동으로 클래스형 컴포넌트가 생성된다. 

 

import React, { Component } from 'react';

class MyComponentClass extends Component {
  // static react 컴포넌트에서 공통적으로 사용되는 값을 지정할 때 쓰인다.
  static defaultProps = {
    name: '기본 이름',
  };
  render() {
    // 먼저 조회를 해서 사용한다.
    const { name } = this.props;
    return <div>{name}입니다.</div>;
  }
}

export default MyComponentClass;

클래스형 컴포넌트에서 props를 사용할 때 render 함수에서 this.props를 조회하면 된다.

import './App.css';
import MyComponent from './MyComponent';
import MyComponentClass from './MyComponentClass';

function App() {
  return (
    <div>
      <MyComponent name={42}>칠드런</MyComponent>
      <MyComponentClass />
    </div>
  );
}

export default App;

static으로 선언을 해줬기때문에 되는 것이다.

---

state

state에서 컴포넌트 내부에서 바뀔 수 없는 값을 의미한다. 

props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며,

컴포넌트 자신은 해당 props를 읽기 전용으로만 사용가능하다.

props를 바꾸려면 부모 컴포넌트에서 바구어 줘야한다. 

 

클래스형 컴포넌트의 state

import React, { Component } from 'react';

class Counter extends Component {
  // 1. constructor 메서드를 작성해야된다.
  // 어떤 역할을 할까?
  // 컴포넌트에서 초기 상태(state)와 인스턴스를 설정하는 역할을 한다. 
  // 클래스가 생성되면 가장 먼저 실행된다. 
  constructor(props) {
    // 2. super를 작성
    // 어떤 역할?
    // 부모 클래스(React.Component)의 생성자를 호출하는 역할
    // 부모 클래스의 기능을 그대로 가져와서 사용해야함
    // props를 사용하면 super(props)를 호출해야된다. 안그러면 this.props가 undefined가 된다.
    super(props);
    // state 초기값 설정
    this.state = { number: 0 };
    // 컴포넌트 내부에서 변경될 수 있는 데이터(state)를 초기화한 코드
  }
  // ↑ 구조체 완료

  render() {
    // 초기값에서 설정한 걸 가져왔다. 그리고 조회했다.
    const { number } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            // this.setState를 사용해 state에 새로운 값을 넣을 수 있다.
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

render 함수에서 현재 state를 조회할때는 this.state를 조회하면된다.

button안에 onClick 값을 props로 넣었는데, 

버튼이 클릭될 때 호출시킬 함수를 설정할 수 있게 해준다. 즉, 이벤트를 설정한다고 한다. 

 

이벤트로 설정할 함수를 넣어 줄 때는 화살표 함수 문법을 사용해야한다.

함수 내부에서는 this.setState라는 함수를 사용했는데 이 함수가 state값을 바꿀 수 있게 한다.

import './App.css';
// import MyComponent from './MyComponent';
// import MyComponentClass from './MyComponentClass';
import Counter from './Counter';

function App() {
  return (
    <div>
      {/* <MyComponent name={42}>칠드런</MyComponent> */}
      {/* <MyComponentClass /> */}
      <Counter />
    </div>
  );
}

export default App;

랜더링하면 위의 사진과 같이 결과가 나온다. +1을 누르면 1씩 숫자가 올라간다. 

 

state 객체 안에 여러 값이 있을때

import React, { Component } from 'react';

class Counter extends Component {
  // 1. constructor 메서드를 작성해야된다.
  // 어떤 역할을 할까?
  constructor(props) {
    // 2. super를 작성
    // 어떤 역할?
    super(props);
    // state 초기값 설정
    // - state에서 객체 형식으로 여러개 할당하면 된다.
    this.state = { number: 0, fixednumber: 0 };
  }
  // ↑ 구조체 완료

  render() {
    // 초기값에서 설정한 걸 가져왔다. 그리고 조회했다.
    // - 그리고 여기서 지정해주면 된다.

    const { number, fixednumber } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <h2>{fixednumber}</h2>
        <button
          onClick={() => {
            // this.setState를 사용해 state에 새로운 값을 넣을 수 있다.
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

state 객체 안에는 여러 값이 올 수 있다. 버튼이 클릭될 때 fixedNumber 값은 그대로 두고 number값만 바뀐다.

그러면 this.setState함수를 사용할 때 인자로 전달되는 객체 내부에 fixedNumber를 넣어줄까? 🙅🏻‍♀️

this.setState함수는 인자로 전달된 객체안에 들어있는 값만 바꾼다. 

 

 간결하게

import React, { Component } from 'react';

class Counter extends Component {
 // state를 constructor에서 꺼냈다. 
 // constructor에 메서드를 선언하지 않고도 state 초기값을 설정할 수 있다.
  state = {
    number: 0,
    fixednumber: 0,
  };
  // ↑ 구조체 완료

  render() {
    // 초기값에서 설정한 걸 가져왔다. 그리고 조회했다.
    // - 그리고 여기서 지정해주면 된다.

    const { number, fixednumber } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <h2>{fixednumber}</h2>
        <button
        // this.setState에 객체 대신 함수 인자 전달하기
          onClick={() => {
            // this.setState를 사용해 state에 새로운 값을 넣을 수 있다.
            this.setState({ number: number + 1 });
            this.setState({ number: this.state.number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

this.setState에 객체 대신 함수 전달하기 주석에 대한 설명을 하겠다.

this.setState를 사용해 state값을 업데이트할 때는 상태가 비동기적으로 업데이트된다. 

 

this.setState를 두번씩 호출해도 state값이 바뀌지 않는다. 

이를 해결하기위해 this.setState를 사용할 때 객체 대신 함수를 인자로 넣는 것이다.

 

import React, { Component } from 'react';

class Counter extends Component {
  state = {
    number: 0,
    fixednumber: 0,
  };
  // ↑ 구조체 완료

  render() {
    const { number, fixednumber } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <h2>{fixednumber}</h2>
        <button
          onClick={() => {
            // this.setState를 사용해 state에 새로운 값을 넣을 수 있다.
            this.setState({ number: number + 1 }, () => {
              console.log('방금 setState가 호출되었습니다.');
              // 함수 동작 확인할 때 실제로 콘솔 찍어본다.
              console.log(this.state);
              // 함수 동작 확인되고 값이 변하게 확인이 필요할 때
            });
            // this.setState({ number: number + 1 });
            // this.setState({ number: this.state.number + 1 });
            // 1. 인자를 함수방식으로 넣는 방법
            this.setState((prevState) => {
              return {
                number: prevState.number + 1,
              };
            });
            // 위 코드와 아래 코드는 완전히 똑같은 기능을 수행
            // 아래 코드는 함수에서 바로 객체를 반환
            // 2. 인자를 함수 방식으로 넣는 방법 -> 권장 방식
            this.setState((prevState) => ({
              number: prevState.number + 1,
            }));
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

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

import React, { useState } from 'react';

/**
 배열 비구조화 할당
 const array = [1,2]
 const one = array[0]
 const two = array[1]

 ->

 const array = [1,2]
 const [one, two] = array
 */

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요');
  const onClickLeave = () => setMessage('안녕히가세요');
  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};

export default Say;

 

배열 비구조화 할당은 객체 비구조화할당하고 비슷하다.

배열 안에 들어있는 값을 쉽게 추출하느 것이다. 

 

useState를 사용해봤다.

useState 함수의 인자에 상태의 초깃값을 넣어야한다. 

클래스형 컴포넌트에서 state 초깃값은 객체 형태로 넣어준다고 했었는데

useState에서는 반드시 객체가 아니어도 상관없다. 값의 형태는 자유이다.

 

함수를 호출하면 배열이 반환된다.

배열의 첫 번재 원소는 현재 상태, 두 번째 원소는 상태를 바꿔주는 함수이다. 

이 함수를 세터 함수라고 한다. 

배열 비구조화 할당을 통해 이름을 자유롭게 정할 수 있다. 

import './App.css';
import Say from './Say';

function App() {
  return (
    <div>
      <Say />
    </div>
  );
}

export default App;

한 컴포넌트에서 useState 여러번 사용하기

import React, { useState } from 'react';

/**
 배열 비구조화 할당
 const array = [1,2]
 const one = array[0]
 const two = array[1]

 ->

 const array = [1,2]
 const [one, two] = array
 */

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: 'pink' }} onClick={() => setColor('pink')}>
        분홍색
      </button>
    </div>
  );
};

export default Say;

한 컴포넌트에서 useState 여러번 사용해도 상관없다. 

---

이벤트 핸들링

import './App.css';
import EventPractice from './EventPractice';

function App() {
  return (
    <div>
      {/* 이벤트 핸들링 예제 */}
      <EventPractice />
    </div>
  );
}

export default App;

 

import React, { Component } from 'react';

class EventPractice extends Component {
  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해 보세요"
          onChange={(e) => {
            console.log(e.target.value);
          }}
        />
      </div>
    );
  }
}

export default EventPractice;

import React, { Component } from 'react';

class EventPractice extends Component {
  state = { message: '' };
  render() {
    return (
      <div>
        <h1>이벤트 연습</h1>
        <input
          type="text"
          name="message"
          placeholder="아무거나 입력해 보세요"
          value={this.state.message}
          onChange={(e) => {
            this.setState({
              message: e.target.value,
            });
          }}
        />
        <button
          onClick={() => {
            alert(this.state.message);
          }}
        >
          확인
        </button>
      </div>
    );
  }
}

export default EventPractice;

---

JSX 문법

1. JSX - camelCase 표현식 사용

background-color → backgroundColor

 

2. 클래스 방식에서 component의 함수를 사용할 때는 this.함수명으로 사용해야한다.

3. JSX에서는 style을 DOM요소에 문자열 형태가 아닌 객체 형태로 {}로 설정해야한다.

const style = {
	backgroundColor: "black"
    color: "pink",
    padding: 6, 
}

 

4. 주석 

{/* */}

 

5. 요소 여러개가 있을 경우 반드시 하나의 부모 요소로 감싸야한다. 

component

- 기능 단위, 재사용 단위의 객체

- react ui component를 만드는 방법

// 1. 함수형
function 함수명() {
	return jsx;
}

// 2. 클래스형
import {Component} from 'react'
Class 컴포넌트 이름 extends Componet {
	render() {// 필수 함수}
    return jsx;
}

 

react에서 이미지 로딩하기

1. public 경로에 있는 이미지

- 경로명으로 바로 접근 가능

- webpack에 의해 번들링되지 않기 때문에 이미지가 많거나 프로젝트가 커질수록 관리가 어려워진다.

 

2. src/assets 경로

- webpack과 같은 모듈 번들러를 사용해 이미지를 처리할 수 있으며 이미지를 최적화하고 번들에 포함시킬 수 있다. 

- 사용방법

2.1 improt를 통해 상수로 사용하기

import 상수명 from '경로'

<img src={상수명} alt="My image">

import myImage from "./assets/images/my-image.jpg"
<img src={myImage} alt="My Image" />

2.2 require()함수를 이용해 module import 하기

require(이미지 경로)

 

state

- 컴포넌트 내부에서 사용하는 상태 값

- 변경할 때는 Component가 제공하는 setState() 함수를 통해서만 변경된다.

- setState() 함수를 통해 변경됐을 때 re-rendering 된다. 

 

Component에서 사용하는 Variable과 Props와 State의 차이점

Variable

- Component내에서 cnst,let 을 통해 선언한 변수

- 값이 변경되도 react가 인지하지 못하므로 re-rendering이 되지 않는다.

 

props

- 부모 Component가 자식 컴포넌트를 사용할 때 값을 전달하는 수단

- 부모 Component가 rendering될 때 자식 Componet도 rendering된다.