기본 주요 학습 요소

[주인장]

1. JSX (JavaScript XML)

- JSX는 JavaScript의 확장 문법으로, JavaScript 코드 안에서 XML 형식의 마크업을 작성할 수 있게 합니다.

- React에서 컴포넌트의 UI를 정의하는 데 주로 사용되며, 가독성이 높고 코드 작성이 편리하도록 도와줍니다.

2. 컴포넌트
- 컴포넌트는 UI를 독립적이고 재사용 가능한 부분으로 나누는 개념입니다.

- React 애플리케이션은 여러 컴포넌트들이 조합되어 전체 UI를 형성합니다.

function Welcome(props) {

    return <h1>Hello, {props.name}</h1>;

}

3. Props (속성)
- Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용되는 매개변수입니다.
- 컴포넌트는 props를 통해 부모로부터 전달받은 데이터를 사용할 수 있습니다.

<Welcome name="John" />

4. State (상태)
- State는 컴포넌트가 자체적으로 유지하고 관리하는 데이터입니다.
- 상태가 변경되면 React는 컴포넌트를 리렌더링하고 변경된 상태를 반영합니다.

class Counter extends React.Component {

    constructor(props) {

        super(props);

        this.state = { count: 0 };

    }

    // ...

}

5.라이프사이클(생명주기)
- 컴포넌트가 생성, 갱신, 제거되는 과정을 라이프사이클이라고 합니다.
- 주요 단계에 따라 라이프사이클 메서드를 사용하여 작업을 수행할 수 있습니다.

class ExampleComponent extends React.Component {

    componentDidMount() {

        // 컴포넌트가 마운트된 후 실행되는 코드

    }

    // ...

}

6. Hooks
- Hooks는 함수 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 함수입니다.
- useState, useEffect 등이 널리 사용되며, 함수형 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있게 합니다.

import React, { useState, useEffect } from 'react';

function ExampleComponent() {

    const [count, setCount] = useState(0);

    useEffect(() => {

        // 컴포넌트가 마운트 또는 갱신된 후 실행되는 코드

    }, [count]);

    // ...

}

7. 이벤트 핸들링
- React에서는 이벤트 핸들링이 일반적인 HTML과 유사하지만, camelCase 표기법을 사용합니다.
- 핸들러 함수를 만들고 JSX에서 이벤트에 연결할 수 있습니다.

function handleClick() { 

    alert(‎'Button Clicked!');

}

<button xxonClick={handleClick}>Click me</button>

8. 조건부 렌더링
- JSX에서 조건에 따라 다른 컴포넌트나 엘리먼트를 렌더링할 수 있습니다.
- 삼항 연산자나 && 연산자 등을 사용하여 조건부 렌더링을 구현할 수 있습니다.

function Greeting({ isLoggedIn }) { 

    return isLoggedIn ? <UserGreeting /> : <GuestGreeting />;

}