[React] React 주요 개념

React에서는 UI를 작은 독립적인 조각으로 나누고 관리하는데, 여기서 자주 사용하는 개념들을 정리해봤다.

Ternary

Ternary는 조건부 연산자로, 삼항 연산자라고도 불린다. Ternary는 if/else 문과 같은 조건문을 한 줄로 작성할 수 있어 가독성과 유지보수성을 높인다.

// condition이 있으면 true, 없으면 false
condition ? true : false

Conditional rendering

Conditional rendering은 조건부 렌더링으로, 특정 조건에 따라 컴포넌트를 렌더링하는 방식이다.

// condition이 있으면 <Component /> 렌더링
{ condition && <Component /> }

Form

Form은 React에서 사용자로부터 입력받은 값을 처리하기 위해 사용하는 요소이다.

Form 요소 안의 입력값들은 React state와 연결된다.

import React, { useState } from 'react';

function Form() {
  const [inputValue, setInputValue] = useState('');

  function handleChange(event) {
    setInputValue(event.target.value);
  }

  function handleSubmit(event) {
    event.preventDefault();
    // input value 처리
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" value={inputValue} onChange={handleChange} />
      <button type="submit">Submit</button>
    </form>
  );
}

State를 props로 받는 방법

State를 props로 받는 방법은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다.

다음은 부모 컴포넌트의 state 값을 자식 컴포넌트의 props로 전달하는 코드다.

jsxCopy code
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [parentState, setParentState] = useState('Hello');

  return (
    <ChildComponent childProp={parentState} />
  );
}

Callback function을 props로 받는 방법

자식 컴포넌트에서 부모 컴포넌트의 함수를 실행할 때 사용된다.

부모 컴포넌트의 함수를 자식 컴포넌트의 props로 전달한다.

jsxCopy code
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [parentState, setParentState] = useState('Hello');

  function handleClick() {
    setParentState('World');
  }

  return (
    <ChildComponent childProp={parentState} handleClick={handleClick} />
  );
}