[리액트] 기본 문법

리액트는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리다. 리액트를 사용하면 컴포넌트 기반의 구조로 UI를 구축할 수 있어 유지 보수가 쉽고 확장성이 높다.

JSX

JSX는 JavaScript XML의 약어로, HTML과 유사한 문법을 가진다. JSX는 리액트 엘리먼트를 생성하며, 가독성이 뛰어나고 작성하기도 쉽다.

const element = <h1 className='greeting'>Hello, world!</h1>;

JSX는 본질적으로 React.createElement 함수를 호출하는 단축 문법이다.

const element = React.createElement(
'h1', 
{className:'greeting'},
 'Hello, world!'
);

JSX는 JavaScript 표현식을 중괄호 안에 넣을 수 있어 유연성을 제공한다.

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

조건부 랜더링

조건부 랜더링은 특정 조건에 따라 컴포넌트를 랜더링하거나 숨기는 기능이다. JavaScript의 조건문을 사용해 조건부 랜더링을 구현할 수 있다.

1. 삼항 연산자: 삼항 연산자를 사용해 간단한 조건부 랜더링을 할 수 있다.

const isLoggedIn = true;
const message = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;

1. 논리 연산자: && 연산자를 사용하면 조건이 참일 때만 특정 컴포넌트를 랜더링할 수 있다.

const isLoggedIn = true;
const message = isLoggedIn && <h1>Welcome back!</h1>;

1. 조건 함수: 복잡한 조건의 경우, 함수로 조건부 랜더링을 관리할 수 있다.

function renderMessage(isLoggedIn) {
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign in.</h1>;
  }
}

리액트의 기본 문법은 간결하고 명확하다. JSX를 통해 직관적인 컴포넌트 구조를 만들 수 있고, 조건부 랜더링을 사용하면 동적인 UI를 쉽게 구현할 수 있다.