React 시작하기

KHW·2021년 10월 7일
0

프레임워크

목록 보기
15/43
post-custom-banner

React

React 특징

  1. Reactive programming (반응형 프로그래밍)
  2. MVC의 V를 React가 관리
  3. 가상돔 : 필요한 부분만 렌더링

사용방법

npx create-react-app 폴더이름을 통해 입력한다.
에러가 난다면 이를 참고


컴포넌트의 분류

  1. 도메인
  2. 역할
  3. 크기
  • 즉, 매번 다르다

간단한 컴포넌트 사용법

Logo컴포넌트

  • src/Logo/index.js
import logo from  './logo.svg';
import PropTypes from 'prop-types'

function Logo(props){
  return (
    <img src={logo} alt="logo" className="App-logo"
    style={{width:props.size , height:props.size}}/>
  )
}

Logo.defaultProps = {
  size : 200
}

Logo.propTypes = {
  size : PropTypes.number
}

export default Logo;

  • App.js
import Logo from './components/Logo'

...

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Logo size="100px"/>
        <Logo />
    ...

export 한 Logo 컴포넌트를 import하여 태그로 사용한다.

  • propTypes를 통해 타입 검사도 가능하다
  • 태그에서 값을 입력하는 경우 (<Logo size="100px"/>)
    string이라면 ""를 붙여야하고 숫자라면 {}를 붙여야 한다.

추가적인 내용

function Logo(props){
  return (
    <img src={logo} alt="logo" className="App-logo"
    style={{width:props.size , height:props.size}}/>
  )
}

Logo.defaultProps = {
  size : 200
}

해당 매개변수 값이 주어지지 않을 때 사용하는 defaultProps는 다른 방법으로도 가능하다.

function Logo({size = 200}){
  return (
    <img src={logo} alt="logo" className="App-logo"
    style={{width:size , height:size}}/>
  )
}

데이터 바인딩

필요한 파일

  1. components/Counter/index.js
  2. App.js

index.js

import {useState} from "react";

function Counter({onIncrease, onDecrease}){
  const [count , setCount] = useState(0);

  const handleIncrease = () => {
    setCount(count+1)
    if(onIncrease) onIncrease(count + 1)
  }

  const handleDecrease = () => {
    setCount(count-1)
    if(onDecrease) onDecrease(count - 1)
  }

  return (
    <div>
      <span style={{fontSize:40}}>{count}</span><br/>
      <button onClick={handleIncrease}>+</button>
      <button onClick={handleDecrease}>-</button>
    </div>
  )
}

export default Counter;

if문을 넣은 이유는 좀 더 안전하게 만들기 위해서이다.
만약 App.js에서 Counter에 onIncrease나 onDecrease가 선언되어있지않으면 에러가 난다.


App.js

import Counter from './components/Counter'
import {useState} from "react"

function App(){
  const [totalCount , setTotalCount] = useState(0)

  return (
    <div>
      TotalCount : {totalCount}
      <Counter
        onIncrease={()=>{setTotalCount(totalCount + 1)}}
        onDecrease={()=>{setTotalCount(totalCount - 1)}}>
      </Counter>
      <Counter
        onIncrease={()=>{setTotalCount(totalCount + 1)}}
        onDecrease={()=>{setTotalCount(totalCount - 1)}}>
      </Counter>
      <Counter
        onIncrease={()=>{setTotalCount(totalCount + 1)}}
        onDecrease={()=>{setTotalCount(totalCount - 1)}}>
      </Counter>

    </div>
  )
}

export default App;

useState

컴포넌트에서 상태를 관리용 함수

useState 를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출해줍니다. 이 함수를 호출해주면 배열이 반환되는데요
여기서 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];
  • 이를 간단히 비구조화로 표현하면
const [ number , setNumber ]= useState(0);
  • 간단히 표현 할 수 있다.

주요 동작원리

  1. 각각의 버튼 카운트 + -
  2. 각각에 영향을 받은 전체 카운트 + -

각각의 버튼 카운트

지역 상태관리를 위해 useState 사용
handleIncrease , handleDecrease 버튼 이벤트에 등록하여 처리


전체 카운트

props , Event Bus , Redux 등을 이용할 수 있으나
props를 사용

부모 컴포넌트 App.js에서 props를 통해 onIncreaseonDecrease를 받고 App.js에서 각각이 실행할 때 setTotalCount를 이용해 totalCount 변화를 처리


useEffect

컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때), 그리고 업데이트 될 때 (특정 props가 바뀔 때) 특정 작업을 처리하는 방법

  • 첫번째 파라미터에는 함수 (변화에 반응하는 함수)
    두번째 파라미터에는 의존값이 들어있는 배열
  • 두번째 파라미터가 빈배열이라면 처음 로드될 때 실행(ex 초기 이벤트 / API호출)

  • 첫번째 파라미터에 이벤트가 등록되어있다면 return을 통해 핸들러 삭제가 필요하다 ( return 부분은 컴포넌트가 제거될 때 실행 )

import React, { useEffect } from 'react';
...
useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

특정 값이 업데이트 될 때 사용 (마운트시 실행 O)

ex)

  useEffect(()=>{
      console.log('totalCount 변경!')
  },[totalCount])

totalCount만 변경될 때 콘솔이 출력되는 것이 아니라
마운트 될 때도 실행된다.


특정 값이 업데이트 될 때 사용 (마운트시 실행 X)

ex)

const mounted = useRef(false)
  useEffect(()=>{
    if(!mounted.current){
      mounted.current = true;
    }
    else {
      console.log('totalCount 변경!')
    }
  },[totalCount])

이렇게 쓰면 콘솔이 처음에 mount 될때 실행되지 않는다.


useRef

사용시기

  1. Dom 직접 접근
  2. 지역변수로 사용

useState와의 차이점은?

useRef : 값이 변경되도 다시 렌더링 X
useState : 값이 변경되면 다시 렌더링 O

profile
나의 하루를 가능한 기억하고 즐기고 후회하지말자
post-custom-banner

0개의 댓글