February 14, 2024 8 min to read

[React] React 기초 정리 [2]

React의 기초를 정리해보자.

React 컴포넌트
Props와 State
이벤트 처리하기
조건부 렌더링

React 컴포넌트

컴포넌트란?

컴포넌트는 리액트 화면에서 UI 요소를 구분할 때 사용하는 최소한의 단위이다.

MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고, 새로운 컴포넌트를 쉽게 만들 수 있다. 그리고 컴포넌트의 이름은 항상 대문자로 시작해야한다.

컴포넌트종류

컴포넌트의 종류는 함수형 컴포넌트와 클래스형 컴포넌트가 있다.

함수형 컴포넌트

함수형 컴포넌트는 자바스크립트의 함수기반 컴포넌트이다.
자바스크립트의 함수를 선언하듯이 function을 사용하여 컴포넌트를 정의하며, return을 사용하여 JSX 코드를 반환한다.

function App(){
  return(
    <div>
      Hello, World!
    </div>
  )
}

화살표 함수로도 표현할 수 있다.

const App = () => {
  return(
    <div>
      Hello, World!
    </div>
  )
}

클래스형 컴포넌트

클래스 컴포넌트는 자바스크립트에서 class를 기반으로 한 컴포넌트이다.
class에서 정의하고 render()함수에서 JSX코드를 반환한다.

클래스 컴포넌트의 특징

React.Component 상속: React의 ComponentClass를 상속받기에 Component 상속 필요
render() 메서드 필수: 클래스 컴포넌트 안에는 render() 메서드가 반드시 필요하며 메서드 안에서 JSX를 리턴
this 키워드 사용: 컴포넌트 메서드, props, state, refs, 생명주기 메서드를 사용할 때 this로 프로퍼티를 참조 후 사용

import React, { Component } from 'react';

class App extends Component {
    render() {
        return (
            <div>
                Hello, World!
            </div>
        );
    }
}

컴포넌트 재사용

컴포넌트 분리: 비슷한 기능을 가진 부분을 독립적인 컴포넌트로 분리한다. 여러 곳에서 사용되는 UI 요소는 개별 컴포넌트로 분리하여 재사용할 수 있다.
속성(props) 활용: 컴포넌트에 속성(props)을 사용하고 부모 컴포넌트에서 자식 컴포넌트로 속성을 전달하여 동적으로 데이터를 변경하거나 다른 컴포넌트와의 상호작용을 가능하게 하며 재사용 할 수 있다.
컴포넌트 컴포지션: 여러 개의 작은 컴포넌트를 조합하여 더 큰 컴포넌트를 만드는 컴포넌트 컴포지션 패턴을 활용하여 재사용 할 수 있다.

Props와 State

Props

컴포넌트에서는 데이터를 가진 하나의 props 객체 인자를 받아 React 엘리먼트를 반환하는데 여기서 props는 속성을 나타내는 데이터이다.

props에 값을 주기

//App.js
<Header />
<Article name="Lee" age={25} />
//props에는 boolean값, 숫자, 배열 등 다양한 데이터를 담을 수 있음
//문자열 제외 모두 중괄호{}를 사용

props의 값을 받아 사용

function Article(props) {
  return(
    <div>Name: {props.name}</div>
    <div>Age: {props.age}</div>
  )
}

props는 읽기전용이며, 컴포넌트의 내부에서 수정불가
함수 컴포넌트에서 props값을 받아올 때 props를 속성으로 가지는 객체로 전달
클래스형 컴포넌트에서는 this.props로 불러와 사용

State

state는 컴포넌트 내부의 동적 데이터를 의미하며, 여러 개의 자식에게서 데이터를 모으거나 두 개의 자식 컴포넌트가 서로 통신하도록 할 때 조상 컴포넌트에서 state를 정의한다.

state값을 변경할 때에는 setState를 사용해야 한다.

클래스형 컴포넌트에서는 컴포넌트 자체가 state를 지니고, 함수형 컴포넌트에서는 useState라는 함수, Hook을 통해 사용할 수 있다.

import { useState } from "react";

useState의 형태는 const [ 상태, set함수 ] = useState(초기값)이다.

useState 사용하기

//React와 useState Hook을 import
import React, { useState } from 'react';

//Button이라는 함수 컴포넌트를 정의
function Button() {
  //"text"라는 state를 만들고, 초기값을 '클릭 전'으로 설정
  //이 state를 업데이트하기 위한 함수로 'setText'를 정의
  //useState 훅을 사용하면 함수 컴포넌트에서도 state를 사용
  const [text, setText] = useState('클릭 전');

  //버튼을 렌더링하고, 버튼이 클릭되면 'setText' 함수를 호출하여
  //'text' state를 '클릭 후'로 업데이트
  //버튼이 클릭되면 '클릭 전'에서 '클릭 후'로 텍스트가 변경
  return (
    <button onClick={() => setText('클릭 후')}>
      {text}
    </button>
  );
}

이벤트 처리하기

리액트 이벤트에 대해

리엑트에서 이벤트는 카멜표기법으로 사용하며 JSX함수명으로 전달한다.
이벤트를 실행할 코드는 함수의 형태로 객체를 전달한다.

DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사하며 DOM 엘리먼트의 이벤트 핸들러를 카멜표기법으로 사용하면 된다.

DOM 엘리먼트 종류

핸들링 함수

const App = () => {
    const clickEvent = () => {
        alert("클릭");
    }
    return (
        <div>
            <button onClick={clickEvent}>클릭</button>
        </div>
    );
};

익명 함수

const App = () => {
    return (
        <div>
            <button onClick={() => { alert('클릭') }}>클릭</button>
        </div>
    )
}

PreventDefault

React에서는 false를 반환해도 기본 동작을 방지할 수 없기에 preventDefault를 호출해야 한다.

preventDefault를 이용하여 링크 클릭으로 다른 사이트로 넘어가는 걸 방지

import React, { useState } from 'react';

const App = () => {
	const [ Name, setName ] = useState("Lee")
    function changeName(e) {
      e.preventDefault();
      setMyName(myName === "Lee" ? "Lee" : "Kim");
    }

    return (
      <div>
        <h1 claaName="MyName">저는 {Name} 입니다.</h1>
        <a href="#" onClick={changeName}>변경</a>
      </div>
    );
};

합성 이벤트

객체로 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper 객체이다. 대부분의 인터페이스는 브라우저 고유 이벤트와 같다.

합성 이벤트 객체 필드 종류

boolean bubbles	이벤트가 DOM을 통하여 상위로 전파 여부의 Boolean 반환 값
boolean cancelable	이벤트에 규정한 액션을 취소할 수 있는지 여부의 Boolean 반환 값
void preventDefault()	해당 DOM의 기본 이벤트를 막는 역할의 메서드
boolean isDefaultPrevented()	해당 이벤트 객체에서 preventDefault() 가 호출되었는지 여부
void stopPropagation()	여러 중첩된 DOM일 때 이벤트 타겟 외 DOM에 이벤트가 적용되지 않도록 버블링을 막음
boolean isPropagationStopped()	해당 이벤트 객체에서 stopPropagation() 이 호출되었는지 여부
DOMEventTarget target	이벤트 핸들러가 할당된 DOM에서 이벤트가 직접 발생한 DOM을 반환
number timeStamp	이벤트가 발생했던 시간을 밀리초 단위로 반환
string type	이벤트의 타입을 문자열로 반환

조건부 렌더링

조건부 렌더링이란?

React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있으며, 애플리케이션의 상태 및 조건에 따라서 컴포넌트 중 몇 개만을 렌더링할 수 있다.

//GuestGreeting.js
import React from 'react'

export default function GuestGreeting() {
  return (
    <div>
        <div>첫 방문을 환영합니다!</div>
    </div>
  )
}

//UserGreeting.js
import React from 'react'

export default function UserGreeting() {
  return (
    <div>
        <div>회원님 환영합니다!</div>
    </div>
  )
}

//App.js
function App(props) {
  const isLogin = props.isLogin;

  if (isLogin) 
    return (<UserGreeting/>);
  else
    return (<GuestGreeting/>);
}

이렇게 조건문을 이용하여 필요한 컴포넌트를 렌더링할 수 있으며, if-else문, &&, 삼항 연산자 등 여러 조건문을 사용할 수 있다.

정리하면서

React를 정리하면서 기초 개념들을 알았고, 배운 점들을 이용하여 나의 포트폴리오와 여러 프로젝트를 만들어보면서 실력을 키워나갈 예정이다.

Study BLoG v3.1.2

[React] React 기초 정리 [2]

React 컴포넌트

Props와 State

이벤트 처리하기

조건부 렌더링

[React] React 기초 정리 [1]

HyunKyu

Comments

[React] React 기초 정리 [2]

React 컴포넌트

Props와 State

이벤트 처리하기

조건부 렌더링

[React] React 기초 정리 [1]

Share

HyunKyu

Comments