개발 환경 구성

React 애플리케이션을 시작하기 위해 다음 명령어를 사용합니다:

npx create-react-app 프로젝트명
npx create-react-app 타입스크립트-앱 --template typescript

npx create-react-app은 React 공식 스캐폴딩 도구로, 임시 설치 후 프로젝트 초기화를 수행하며 전역 설치가 필요하지 않습니다.

애플리케이션 실행

yarn start
또는
npm start

JSX 개요

JSX(JavaScript XML)는 JavaScript 코드 내에서 HTML 구조를 작성할 수 있게 해주는 문법입니다.

주요 장점:

• HTML과 유사한 문법으로 학습 곡선이 낮음
• JavaScript의 프로그래밍 능력을 활용한 동적 HTML 생성

JSX 표현식

function AppComponent() {
  const handleClick = () => {
    console.log('클릭 이벤트 발생');
  };
  
  return (
    <div className="app-container" onClick={handleClick}>
      안녕하세요! {themeColor}
    </div>
  );
}

리스트 렌더링

const studentData = [
  { 이름: '홍길동', 나이: 20, 설명: '안녕하세요' },
  { 이름: '김철수', 나이: 22 }
];

return (
  <ul>
    {studentData.map(학생 => (
      <li key={학생.나이}>
        이름: {학생.이름}, 나이: {학생.나이}
      </li>
    ))}
  </ul>
);

조건부 렌더링

{isVisible ? <span>표시됨</span> : null}
{isValid && (
  <div>
    <span>유효한 내용</span>
    <h2>제목</h2>
  </div>
)}

동적 태그 생성

export default function createHeader(level) {
  return React.createElement('h' + level, null, '제목 텍스트');
}

{createHeader(3)}

스타일 적용

<span style={{color: "blue"}}>스타일 적용 텍스트</span>
<span className="highlight">CSS 클래스 적용</span>

Fragment 사용

<>
  <div onClick={handleAction}>
    <br/>
    <span className={isActive ? 'active' : ''}>스팬 요소</span>
  </div>
</>

컴포넌트 정의

함수형 컴포넌트

export default function MainHeader() {
  return <h1>메인 제목</h1>;
}

<MainHeader/>

클래스 컴포넌트

export default class ContentArea extends React.Component {
  render() {
    return <section>콘텐츠 영역</section>;
  }
}

이벤트 핸들링

export default class InteractiveComponent extends React.Component {
  handleClick = (event) => {
    event.preventDefault();
    console.log('이벤트 처리');
  }

  render() {
    return <a href="#" onClick={this.handleClick}>링크</a>;
  }
}

매개변수 전달

handleAction = (message) => {
  console.log(message);
}

render() {
  return <button onClick={() => this.handleAction('전달 메시지')}>
    실행 버튼
  </button>;
}

상태 관리

state = {
  사용자명: '관리자',
  카운트: 0
}

updateCount = () => {
  this.setState({
    카운트: this.state.카운트 + 1
  });
}

render() {
  return <button onClick={this.updateCount}>
    {this.state.카운트}
  </button>;
}

폼 처리

제어 컴포넌트

handleInputChange = (event) => {
  this.setState({
    입력값: event.target.value
  });
}

render() {
  return <input 
    type="text" 
    value={this.state.입력값} 
    onChange={this.handleInputChange} 
  />;
}

비제어 컴포넌트

inputRef = React.createRef();

render() {
  return (
    <input type="text" ref={this.inputRef} />
    <button onClick={() => console.log(this.inputRef.current.value)}>
      값 확인
    </button>
  );
}

컴포넌트 간 데이터 전달

interface ComponentProps {
  콘텐츠: string;
  제목?: string;
}

export default class DataComponent extends React.Component<ComponentProps> {
  render() {
    return <div>{this.props.콘텐츠}</div>;
  }
}

React Hooks

function ModernComponent() {
  const [사용자, set사용자] = useState({ 이름: '사용자' });
  
  useEffect(() => {
    console.log('컴포넌트 마운트됨');
  }, []);
  
  useEffect(() => {
    console.log('사용자 이름 변경됨');
  }, [사용자.이름]);

  return (
    <div onClick={() => set사용자({ 이름: '새 사용자' })}>
      {사용자.이름}
    </div>
  );
}