[React] 리액트 컴포넌트(Component), props

유희옥·2023년 2월 13일
0

React

목록 보기
2/7
post-thumbnail

1. 리액트 컴포넌트(Component)란?

: 리액트로 만들어진 앱을 이루는 최소한의 단위

기존의 웹 프레임워크는 MVC 방식으로 분리하여 관리하기 때문에 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다.

반면, 컴포넌트는 MVC 의 뷰를 독립적으로 구성하여 재사용을 할 수있고, 이를 통해 컴포넌트를 쉽게 만들 수 있다.



1-1. 리액트 컴포넌트 만들기

import React from 'react';

1-2. 리액트 컴포넌트 내보내기

 export default Hello;

: 내보내기를 한 경우 다른 컴포넌트에서 불러와서 사용가능

import React from "react";
function Hello(){
    return <div>안녕하세요</div>
}
 export default Hello;


2. props 를 통해 컴포넌트에게 값 전달하기

: props : properties 의 줄임말
어떠한 값을 컴포넌트에게 전달해줘야할때, props를 사용한다

<예시>

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

Hello 컴포넌트에서 App 컴포넌트에 있는 name값 사용

import React from 'react';
function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}
export default Hello;

컴포넌트에 전달되는 props는 파라미터를 통하여 조회 가능
ex) name 값을 조회하고 싶다면 props.name 로 조회


<예시2>
: App 컨포넌트에 color 값 설정 후 Hellow 컨포넌트에 props 전달

import React from 'react';
import Hello from './Hello';
function App() {
  return (
    <Hello name="react" color="red"/>
  );
}
export default App;

:Hello 컴포넌트에서 color 조회, 폰트색상으로 설정

import React from 'react';
function Hello(props) {
  return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>
}
export default Hello;

props 내부의 값을 조회할 때마다 props. 입력
-> 비구조화 할당 문법을 사용해서 코드 간결하게 작성

import React from 'react';
function Hello({ color, name }) {
  return <div style={{ color }}>안녕하세요 {name}</div>
}
export default Hello;


2-1. defaultProps 로 기본값 설정

: 컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값을 설정하고 싶다면 컴포넌트에 defaultProps라는 값을 설정하면 된다.


<예시>

import React from "react";
function Hello({color, name}){
    return <div style={{ color }}>안녕하세요 { name }</div>
}
Hello.defaultProps ={
    name: '이름없음'
}
 export default Hello;

App 컨포넌트에서 name이 없는 Hello 컴포넌트 렌더링

import React from 'react';
import Hello from './Hello';
function App() {
  return (
    <>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </>
  );
}
export default App;

2-2 props.children

:컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children 을 조회

<예제>
Wrapper 컴포넌트 생성

import React from 'react';
function Wrapper() {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
    </div>
  )
}
export default Wrapper;

App 컴포넌트에서 Wrapper 사용
import React from 'react';
import Hello from './Hello';
import Wrapper from './Wrapper';
function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/>
      <Hello color="pink"/>
    </Wrapper>
  );
}
export default App;



내부의 내용이 보여지게 하기 위해서는 Wrapper에서 props.children을 렌더링해줘야 한다.

import React from 'react';
function Wrapper({ children }) {
  const style = {
    border: '2px solid black',
    padding: '16px',
  };
  return (
    <div style={style}>
      {children}
    </div>
  )
}
export default Wrapper;


정리하자면 쓰이는곳(App.js)에서 값을 정한다 = props(부모)
쓰임 당하는 곳(Hello.js 나 Wrapper.js)에서 값을 정한다 = children(자식)




3. useState를 통해 컴포넌트에서 바뀌는 값 관리

: 컴포넌트에서 동적인 값을 상태(state)라고 부름. 리액트에 useState 함수를 사용해서 컴포넌트에서 상태 관리 가능

누르면 숫자가 바뀌는 Counter 컴포넌트 생성

import React from 'react';
function Counter() {
  return (
    <div>
      <h1>0</h1>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}
export default Counter;

App 컴포넌트에서 Counter 렌더링

import React from 'react';
import Counter from './Counter';
function App() {
  return (
    <Counter />
  );
}
export default App;




<이벤트 설정>

import React from 'react';
function Counter() {
  const onIncrease = () => {
    console.log('+1')
  }
  const onDecrease = () => {
    console.log('-1');
  }
  return (
    <div>
      <h1>0</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}
export default Counter;

화살표함수를 사용하여 onIncrease, onDecrease 구현
엘리먼트에 이벤트를 설정할때에는 on이벤트이름={실행하고싶은 함수} 형태로 설정


**주의할점
함수형태를 넣어줘야하지, 실행하면 안됨(아래와 같은 코드)

onClick={onIncrease()}

<동적인 값 넣기>
useState 함수를 불러와서 사용

import React, { useState } from 'react';
function Counter() {
  const [number, setNumber] = useState(0);
  const onIncrease = () => {
    setNumber(number + 1);
  }
  const onDecrease = () => {
    setNumber(number - 1);
  }
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}
export default Counter;
import React, { useState } from 'react';

: useState 함수를 불러옴

useState 를 사용할때에는 상태의 기본값을 파라미터로 넣어서 호출함
첫번째 원소는 현재상태, 두번째원소는 Setter 함수

원래는 다음과 같이 해야함

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

배열 비구조화 할당 을 통하여 각 원소 추출함

  const onIncrease = () => {
    setNumber(number + 1);
  }
  const onDecrease = () => {
    setNumber(number - 1);
  }

Setter 함수 피라미터로 전달 받은 값을 최신상태로 설정해줌

<h1>{number}</h1>

함수 업데이트

import React, { useState } from 'react';
function Counter() {
  const [number, setNumber] = useState(0);
  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }
  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }
  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}
export default Counter;
profile
기록자

0개의 댓글