Learning React Basic

리액트(react)는 페이스북/메타에서 개발한 UI를 렌더링하기 위한 강력한 자바스크립트 라이브러리입니다. 이 라이브러리는 복잡한 웹 애플리케이션의 인터페이스를 작고 독립적이며 재사용 가능한 요소들로 분해하여 구성할 수 있게 해주며, 이를 통해 개발자들은 더욱 효율적이고 유지보수가 용이한 코드를 작성할 수 있습니다.

• 컴포넌트 중심의 설계(component-based architecture): 리액트는 사용자 인터페이스를 재사용 가능한 독립적 요소들로 분해하는 방식을 채택합니다.

  • 각 요소는 자체적인 논리와 상태를 가지며, 이러한 구조는 코드의 모듈화와 유지보수를 더욱 효율적으로 만듭니다.

• 가상 돔(Virtual DOM): 리액트는 가상 돔을 사용해 렌더링을 최적화합니다. 실제 돔과 직접 연결하는 대신, 가벼운 가상 복사본을 만들어 필요한 부분만 갱신하고 조작합니다.

• JSX 문법(JSX syntax): 리액트는 자바스크립트 안에 HTML을 작성할 수 있는 고유한 문법을 제공합니다. 이를 통해 개발자는 UI 코드와 렌더링을 더 직관적으로 이해할 수 있습니다.

• 상태와 프롭스 관리(state and props management): 상태는 컴포넌트 내부에서 관리되는 동적인 데이터 저장소입니다. 프롭스는 부모가 자식 요소에게 전해주는 읽기 전용의 자료입니다.

  • 후크(hook): 후크는 상태 관리를 간단화하기 위해 16.8 버전부터 추가된 공식적인 디자인 패턴입니다.

• 리액트 라우터(react router): 클라이언트가 스스로 라우팅을 할 수 있게 만드는 기능입니다.

현대의 웹 개발에서 리액트의 위치

• Angular, Vue와 함께 현재 가장 널리 사용되는 프론트엔드 라이브러리입니다. 넷플릭스, 인스타그램, 페이스북, 에어비엔비 등 많은 기업들이 리액트를 채택하고 있습니다.

• Redux, React Native, Material-UI, Webpack, Vite, Babel 등 다양한 도구와 확장 라이브러리를 지원합니다.

• GraphQL, REST APIs, WebSocket 등 다양한 프레임워크와 호환되어 높은 유연성을 제공합니다.

Writing a Component

리액트 애플리케이션은 컴포넌트(component)라는 재사용 가능한 사용자 인터페이스 조각들로 구성되어 있습니다. 이러한 요소들은 독립적이고 모듈화된 구조를 가지며, 각각 마크업으로 변환되는 자바스크립트 함수의 형태를 띱니다. 각 요소는 자체적인 로직과 상태를 가질 수 있으며, 다른 요소들과 조합되어 복잡한 사용자 인터페이스를 구축하는 데 사용됩니다.

코드

function Profile(){
	return (
		<img src="<https://i.imgur.com/MK3eW3As.jpg>" alt="Katherine Johnson"/>
	);
}

export default function Gallery(){
	return (
		<section>
			<h1>Amazing Scientists</h1>
			<Profile />
			<Profile />
			<Profile />
		</section>
	);
}

Markup and JSX

리액트에서 각 요소는 마크업을 포함하는 하나의 함수입니다. 이를 작성하기 위해 JSX라는 특별한 문법을 사용합니다. HTML과 유사하지만, 동적인 정보 전달을 위해 더 엄격하게 설계되었습니다. 그래서 JSX는 마크업과 다른 독특한 문법 규칙을 가지고 있어, 일반적인 마크업에서 허용되는 다음과 같은 문법이 오류를 발생시킵니다.

코드

export default function TodoList() {
  return (
    <h1>Hedy Lamarr's Todos</h1>
    <img
      src="<https://i.imgur.com/yXOvdOSs.jpg>"
      alt="Hedy Lamarr"
      class="photo"
    >
    <ul>
      <li>Invent new traffic lights
      <li>Rehearse a movie scene
      <li>Improve spectrum technology
    </ul>
  );
}

JSX는 자바스크립트의 논리나 동적 특징 참조를 마크업에 포함시킬 수 있게 합니다. 이때 {}를 사용하며 이를 창을 연다(open a window)라 표현합니다.

코드

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="<https://i.imgur.com/7vQD0fPs.jpg>"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

Props Propagation

리액트는 프롭(props)을 통해 컴포넌트 간 상호작용을 합니다. 부모 컴포넌트가 자식 컴포넌트에게 프롭을 전달하여 데이터를 주고받는 것을 프롭스 전파(props propagation)라고 합니다.

코드

import { getImageUrl } from './utils.js'

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

Conditional Rendering

컴포넌트가 표시되는 방식은 상황에 따라 다를 수 있습니다. JSX는 자바스크립트의 if, &&, ? : 연산자를 사용하여 조건부 렌더링을 구현할 수 있습니다.

코드

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked && '✔'}
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item
          isPacked={true}
          name="Space suit"
        />
        <Item
          isPacked={true}
          name="Helmet with a golden leaf"
        />
        <Item
          isPacked={false}
          name="Photo of Tam"
        />
      </ul>
    </section>
  );
}