JSX 문법 활용

JSX는 JavaScript의 확장 문법으로 HTML과 유사한 구조를 사용합니다. 중괄호를 통해 JavaScript 표현식을 포함할 수 있습니다.

function formatUserName(person) {
  return person.givenName + ' ' + person.familyName;
}

const personData = {
  givenName: 'Minsoo',
  familyName: 'Kim'
};

const greetingElement = (
  <h2>
    안녕하세요, {formatUserName(personData)}님!
  </h2>
);

ReactDOM.render(
  greetingElement,
  document.getElementById('root')
);

Babel은 JSX를 React.createElement() 호출로 변환합니다:

const welcomeElement = (
  <h2 className="welcome-text">
    환영합니다!
  </h2>
);

// 변환 결과
const welcomeElement = React.createElement(
  'h2',
  {className: 'welcome-text'},
  '환영합니다!'
);

엘리먼트 렌더링

React 엘리먼트는 순수 JavaScript 객체입니다. DOM에 렌더링하려면 ReactDOM.render()를 사용합니다.

const headerElement = <h2>React 시작하기</h2>;
ReactDOM.render(headerElement, document.getElementById('root'));

컴포넌트 구성

UI를 독립적인 단위로 분할하여 재사용 가능한 컴포넌트를 생성합니다.

함수형 컴포넌트

function Greeting(props) {
  return <h3>{props.message}</h3>;
}

클래스 컴포넌트

class Greeting extends React.Component {
  render() {
    return <h3>{this.props.message}</h3>;
  }
}

Props는 읽기 전용 속성으로 직접 수정할 수 없습니다.

상태 관리

setState()를 사용하여 상태를 업데이트해야 컴포넌트가 다시 렌더링됩니다.

// 잘못된 방법
this.state.message = '새 메시지';

// 올바른 방법
this.setState({message: '새 메시지'});

상태 업데이트는 비동기적으로 처리되며, 여러 setState 호출이 단일 업데이트로 병합될 수 있습니다.

this.setState((prevState, props) => ({
  countValue: prevState.countValue + props.stepSize
}));

이벤트 핸들링

클래스 컴포넌트에서 이벤트 핸들러 바인딩:

class ToggleButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {active: false};
    this.handleToggle = this.handleToggle.bind(this);
  }

  handleToggle() {
    this.setState(prevState => ({
      active: !prevState.active
    }));
  }

  render() {
    return (
      <button onClick={this.handleToggle}>
        {this.state.active ? '활성' : '비활성'}
      </button>
    );
  }
}

화살표 함수를 이용한 바인딩:

class ActionButton extends React.Component {
  handleAction = () => {
    console.log('이벤트 처리');
  }

  render() {
    return (
      <button onClick={this.handleAction}>
        실행
      </button>
    );
  }
}

매개변수 전달:

class LinkComponent extends React.Component{
  constructor(){
    super();
    this.state = {linkText: '자세히 보기'};
  }
  
  handleClick(linkName, event) {
    event.preventDefault();
    alert(linkName);
  }
  
  render(){
    return (
      <a href="#" onClick={this.handleClick.bind(this, this.state.linkText)}>
        클릭
      </a>
    );
  }
}

조건부 렌더링

let authButton;
if (isAuthenticated) {
  authButton = <LogoutButton onClick={this.handleLogout} />;
} else {
  authButton = <LoginButton onClick={this.handleLogin} />;
}