컴포넌트, jsx, 이벤트와 이벤트 객체 - 리액트의 기초 기능 사용 방법

WEB FE Repository/React

컴포넌트, jsx, 이벤트와 이벤트 객체 - 리액트의 기초 기능 사용 방법

조금씩 차근차근 2025. 9. 19. 16:25

개인 학습용 정리로, 리액트 첫 학습을 목적으로 찾아보고 계신다면 공식 문서를 강력히 권장드립니다.

자습서: React 시작하기 – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

컴포넌트란?

js에서 html 코드를 반환하는 함수.
컴포넌트들은 트리 구조로 관리되며, root 컴포넌트를 루트 노드로 삼는다.
특정 컴포넌트의 리턴값 안에 들어있는 컴포넌트를 특정 컴포넌트의 “자식 컴포넌트” 라고 한다.
리액트는 클래스 기반 컴포넌트와 함수 기반 컴포넌트가 있지만, 리액트에서는 주로 함수 기반 컴포넌트를 사용한다.
함수 기반 컴포넌트는 반드시 첫글자가 “대문자”여야 한다.
- jsx에서 소문자로 시작하는 이름은 html 요소로 보고
- jsx에서 대문자로 시작하는 이름은 컴포넌트로 본다.
일반적으로 루트 컴포넌트의 이름은 App으로 한다.
리액트는 렌더링 시 Virtual DOM이라는 가상 DOM에 컴포넌트의 결과를 저장하며, 가상 DOM과 현재 DOM의 차이를 비교하여 최대한 적게 렌더링한다.
리액트는 컴포넌트 단위로 Virtual DOM을 갱신시키며, 해당 컴포넌트가 렌더링함수를 통해 Virtual DOM을 갱신시키면 해당 컴포넌트의 모든 하위 컴포넌트도 같이 Virtual DOM 변경 여부를 검사한다.
컴포넌트는 해당 컴포넌트 인스턴스를 생성한다.

JSX

확장된 자바스크립트 문법 (JavaScript Extensions)
JavaScript + HTML
HTML 안에 자바스크립트 값 넣으려면 → 중괄호 블록을 사용하면 가능하다.

JSX 주의사항

중괄호 내부에는 자바스크립트 “표현식” 만 넣을 수 있다.
- 여기서 표현식이란, 한줄로써 값으로써 평가되는 자바스트립트 코드를 의미한다.
- 조건문을 사용하고 싶다면 삼항 연산자 를 사용해야 한다.
숫자, 문자열, 배열 값만 렌더링된다.
- true, undefined, null, 배열을 제외한 객체 등은 렌더링되지 않는다.
- 객체 안에 있는 문자열이나 숫자, 배열값은 그 값에 접근하면 보인다.
모든 태그는 닫혀있어야 한다.
- 이미지 태그와 같은 닫는 태그가 없었던 태그도 따로 닫아줘야 한다.
최상위 태그는 반드시 하나여야 한다.
- 만약 최상위 태그로 감쌀 마땅한 태그가 없다면 그냥 <> </> 과 같은 빈 태그로 감싸면 된다.
자바스크립트 안에 들어간 HTML 코드는 원래 HTML 코드와 문법이 조금씩 다르다.
- HTML
  - 태그 뒤 class 속성 지정 → className속성
  - (이미 자바스크립트 안에서 class 는 예약어이므로 html의 클래스 지정하려면 className 이용)

JSX에서 외부 CSS파일 import

import "./Main.css";

JSX 의 style 객체

jsx 에서 html의 style을 이용하기 위한 객체.
jsx에서 style 적용하려면 jsx의 style 객체의 문법을 따라야 한다.
대쉬 (-) 대신 뒤 문자를 “대문자”로 바꾸기
- ex) background-color → backgroundColor

import React from 'react';

const MyComponent = () => {
  const myStyle = {
    color: 'blue',
    backgroundColor: 'lightgray',
    padding: '10px',
    borderRadius: '5px',
  };

  return (
    <div style={myStyle}>    // 첫번째 중괄호 : 표현식, 두번째 중괄호 : 객체
      Hello, world!
    </div>
  );
};

export default MyComponent;

Props 로 데이터 전달하는/전달받는 방법

리액트에선 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 수 있다.

Square는 "자식 컴포넌트"이고, 속성의 형태로 매개변수를 전달할 수 있다.

이때 전달되는 값을 propertys의 준말인 props라고 부른다.
매개변수 전달받기 → 컴포넌트에 매개변수 할당
- 이때, props 값은 “객체로 묶여서” 매개변수로 온다
- const Button = (props) => { return ( <button style ={{color:props.color}}>{props.text}</button> ); }; export default Button;

구조분해 할당으로 매개변수를 받는것도 가능하다.

const Button = ({text, color}) => {
    return (
        <button style ={{color:color}}>{text}</button>
    );
};

export default Button;

props 를 전달할때도 외부에 객체 선언 후 spread 연산자로 값을 주는것도 가능하다.
컴포넌트가 전달받을 값의 default값 설정 → Component.defaultProps

Component.defaultProps = {
    key : "value",
};

jsx에서 컴포넌트 사이에 있는 값은 children 이라는 키를 가진 프로퍼티로써 props 객체에 추가되어 자식 컴포넌트에게 전달된다!
자식 컴포넌트에서 부모 컴포넌트로 값을 전달하는것은 불가능하다.

이벤트 핸들링

주로 사용자와 상호작용 시 발생하는 모든 것들을 이벤트라고 한다.
- 즉, 내 코드가 아닌 사용자의 상호작용에 대응해야 하는 기능이 필요하다면, 이 이벤트 핸들링을 찾아보자.
이벤트 핸들링이란?
- 이벤트가 발생했을 시 그것을 처리하는 것
- ex) 버튼 클릭 시 경고창 노출
- onClick, onMouseEnter 등등 이벤트 속성에 들어가는 함수와 같이 사건이 일어났을 때 그 일을 처리하는 함수.
이벤트 핸들링 함수 사용시 주의할점
- 이벤트 속성에 함수의 리턴값을 전달하는게 아니라 (func1())
- 콜백함수처럼 함수 객체를 전달해야 함 (func1)
이벤트 속성은 이벤트 핸들러 사용 시 매개변수로 “이벤트 객체”를 건네준다.

이벤트 객체

이벤트 핸들링 함수에게 현재 발생한 이벤트에 대해 정보를 알려주기 위해 그 정보를 프로퍼티로 담은 객체
리액트는 각 브라우저마다 다른 표준으로 인한 Cross Browsing Issue 를 해결하기 위해 합성 이벤트 객체 (SyntheticBaseEvent)를 생성해서 넘겨준다.
현재 이벤트가 발생한 요소 접근방법 → e.target
e.target 은 이벤트가 실제로 변경한 DOM 요소를 담고 있다.
- <input /> 태그는 e.target.value 로 "현재 입력된 값"에 접근할 수 있다.

사용하는 태그가 원래 이벤트 핸들링 하는 애들이 아니라서 이벤트 객체가 없다면?

input, button 등등은 자동으로 이벤트 객체를 생성하는데
일반 컴포넌트, div 태그들은 이벤트 객체를 생성해주지 않으므로
이때는 따로 이벤트 객체를 직접 만들어서 매개변수로 전달해야 한다.