[TIL]React 기초: createElement, 컴포넌트, JSX, Props, State, 이벤트 처리

 

1. React 시작과 렌더링

React는 UI를 선언적으로 만들기 위한 JavaScript 라이브러리이다.

기존 DOM 조작처럼 요소를 직접 만들고 붙이는 대신, React는 화면 구조를 설명하는 React 엘리먼트를 만들고 이를 렌더링한다.

---

2. React.createElement와 render

2.1 기존 JavaScript 방식

기존에는 document.createElement()로 요소를 만들고 appendChild()로 DOM에 직접 추가했다.

const h1 = document.createElement('h1');
h1.textContent = 'Hello, JS!';
document.getElementById('root').appendChild(h1);

2.2 React 방식

React에서는 React.createElement()로 엘리먼트를 만들고 render()로 화면에 출력한다.

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

ReactDOM.createRoot(document.getElementById('root')).render(greeting);

정리

• React.createElement()는 React 엘리먼트를 생성한다.
• ReactDOM.createRoot()는 React 18의 렌더링 시작점이다.
• React는 UI를 직접 조작하기보다 선언적으로 표현한다.

---

3. 컴포넌트(Component)

컴포넌트는 UI를 재사용 가능한 단위로 나눈 것이다.

React에서는 클래스형 컴포넌트와 함수형 컴포넌트를 만들 수 있다.

3.1 클래스형 컴포넌트

class TitleClass extends React.Component {
    render() {
        return React.createElement(
            'h1',
            { className: 'classComponent' },
            '클래스형 컴포넌트입니다.'
        );
    }
}

3.2 함수형 컴포넌트

function OldWayComponent() {
    return React.createElement(
        'div',
        null,
        React.createElement('h1', { className: 'greeting' }, 'createElement 방식'),
        React.createElement('p', null, '코드가 길고 복잡하다.')
    );
}

정리

• 컴포넌트는 재사용 가능한 UI 부품이다.
• 컴포넌트 이름은 반드시 대문자로 시작해야 한다.
• 현재 React에서는 함수형 컴포넌트를 주로 사용한다.

---

4. JSX

JSX는 JavaScript 안에서 HTML과 비슷한 문법으로 UI를 작성할 수 있게 해주는 문법이다.

실제로는 Babel이 JSX를 React.createElement() 형태로 변환해준다.

function NewWayComponent() {
    return (
        <div>
            <h1 className="greeting">JSX 방식</h1>
            <p>코드가 간단하다</p>
        </div>
    );
}

장점

• 가독성이 좋다.
• UI 구조를 직관적으로 표현할 수 있다.
• 복잡한 중첩 구조를 더 쉽게 작성할 수 있다.

---

5. JSX 문법 규칙

5.1 중괄호 {} 안에 JavaScript 표현식 사용

const user = { name: '홍길동', age: 20 };

<h3>이름: {user.name}</h3>

5.2 함수 호출 가능

function introduce(user) {
    return `안녕하세요, 저는 ${user.name}이고 ${user.age}세 입니다.`;
}

<p>소개: {introduce(user)}</p>

5.3 속성 이름 차이

HTML과 달리 JSX에서는 일부 속성 이름이 다르다.

<button className="my-button" onClick={handleClick}>
    클릭해보세요.
</button>

• class 대신 className
• onclick 대신 onClick
• 이벤트 이름은 camelCase 사용

5.4 인라인 스타일은 객체로 작성

const customStyle = {
    backgroundColor: 'cornflowerblue',
    color: 'white',
    padding: '10px',
    borderRadius: '5px'
};

<p style={customStyle}>스타일 적용</p>

5.5 모든 태그는 닫아야 함

<br />
<hr />
<input />

정리

• JSX 안에서는 JavaScript 표현식을 자유롭게 사용할 수 있다.
• HTML과 완전히 같지 않기 때문에 JSX 규칙을 지켜야 한다.
• 스타일은 문자열이 아니라 객체 형태로 전달한다.

---

6. Fragment

React 컴포넌트는 하나의 루트 요소만 반환해야 한다.

여러 요소를 묶고 싶지만 불필요한 DOM 태그를 만들고 싶지 않을 때 Fragment를 사용한다.

function App() {
    return (
        <>
            <OldWayComponent />
            <hr />
            <NewWayComponent />
        </>
    );
}

정리

• Fragment는 여러 요소를 감싸는 용도이다.
• 실제 DOM에는 불필요한 태그가 추가되지 않는다.

---

7. 렌더링과 화면 갱신

React는 상태 변화나 다시 렌더링이 필요할 때 컴포넌트를 다시 실행해 화면을 갱신한다.

시계 예제에서는 setInterval()로 1초마다 다시 렌더링하여 현재 시간을 표시했다.

function Clock() {
    return (
        <div>
            <h1>실시간 시계</h1>
            <h2>현재 시간: {new Date().toLocaleTimeString()}</h2>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById('root'));

function tick() {
    root.render(<Clock />);
}

setInterval(tick, 1000);

정리

• React는 필요할 때 컴포넌트를 다시 렌더링한다.
• 다시 렌더링되어도 변경된 부분만 효율적으로 반영하려고 한다.
• 시간, 상태, 사용자 입력 변화에 따라 UI를 동적으로 갱신할 수 있다.

---

8. Props

Props는 부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터이다.

읽기 전용이며, 자식 컴포넌트는 전달받은 props를 수정할 수 없다.

function Greeting({ name = '기본이름', favoriteNumber, children }) {
    return (
        <>
            <h1>안녕하세요, {name}님!</h1>
            <h2>제가 좋아하는 숫자는 {favoriteNumber} 입니다.</h2>
            <p>
                <strong>전달된 자식 요소(children): {children}</strong>
            </p>
        </>
    );
}

정리

• props는 부모에서 자식으로 전달된다.
• props는 읽기 전용이다.
• 데이터 흐름은 위에서 아래로 단방향이다.

---

9. children과 기본값

9.1 children

컴포넌트 태그 사이의 내용을 children으로 전달할 수 있다.

<Greeting name="홍길동" favoriteNumber={3}>
    React 공부 중이에요.
</Greeting>

9.2 기본값 설정

구조 분해 할당에서 기본값을 줄 수 있다.

function Greeting({ name = '기본이름' }) {
    return <h1>안녕하세요, {name}님!</h1>;
}

정리

• children은 컴포넌트 내부에 포함된 콘텐츠를 전달할 때 사용한다.
• props 기본값은 전달 누락 상황에 대비할 수 있게 해준다.

---

10. PropTypes

PropTypes는 props의 타입을 검사하는 도구이다.

타입이 맞지 않으면 브라우저 콘솔에 경고가 출력된다.

Greeting.propTypes = {
    name: PropTypes.string,
    favoriteNumber: PropTypes.number
};

예를 들어 아래처럼 잘못된 타입을 넘기면 경고가 발생한다.

<Greeting name={123} favoriteNumber={3}>
    React 공부 중이에요.
</Greeting>

정리

• PropTypes는 잘못된 props 전달을 확인하는 데 도움을 준다.
• 필수 여부나 타입 규칙을 검증할 수 있다.
• 런타임 경고를 통해 실수를 줄일 수 있다.

---

11. useState

useState는 함수형 컴포넌트에서 상태를 관리하는 Hook이다.

const [message, setMessage] = useState('초기 상태 메시지입니다.');
const [textColor, setTextColor] = useState('black');

상태가 변경되면 컴포넌트는 다시 렌더링된다.

const handleEnter = () => {
    setMessage('안녕하세요! 환영합니다.');
    setTextColor('blue');
};

정리

• useState(초기값)은 상태값과 상태 변경 함수를 반환한다.
• 상태가 바뀌면 화면도 함께 갱신된다.
• 하나의 컴포넌트 안에서 여러 개의 상태를 선언할 수 있다.

---

12. 상태 업데이트와 함수형 업데이트

상태를 연속으로 바꿀 때는 이전 상태값을 기준으로 계산해야 하는 경우가 있다.

이때 일반 방식보다 함수형 업데이트가 안전하다.

12.1 일반 방식

setNumber(number + 1);
setNumber(number + 1);

위 코드는 기대처럼 2 증가하지 않을 수 있다.

12.2 함수형 업데이트

setNumber((prevNumber) => prevNumber + 1);
setNumber((prevNumber) => prevNumber + 1);

이 방식은 이전 상태를 기준으로 순차적으로 계산하므로 정확하게 2 증가한다.

정리

• 이전 상태값을 기반으로 새 값을 만들 때는 함수형 업데이트를 사용한다.
• 상태 업데이트는 즉시 반영되지 않을 수 있다.
• 여러 번 연속 업데이트가 필요할 때 함수형 업데이트가 중요하다.

---

13. React 이벤트 처리

React에서는 JSX 속성으로 이벤트를 연결한다.

<button onClick={handleSignup}>가입하기</button>

이벤트 핸들러는 보통 함수로 분리해 사용한다.

const handleLeave = () => {
    setMessage('안녕히 가세요! 다음에 또 만나요.');
    setTextColor('red');
};

정리

• React 이벤트는 camelCase 방식으로 작성한다.
• 이벤트에 실행할 함수를 연결하면 사용자 동작에 반응할 수 있다.
• 이벤트 안에서 상태를 바꾸면 UI가 다시 렌더링된다.

---

14. 입력값 처리와 제어 컴포넌트

입력 요소의 값을 React 상태로 관리하면 제어 컴포넌트를 만들 수 있다.

const [username, setUsername] = useState('');
const [email, setEmail] = useState('');

<input
    type="text"
    placeholder="아이디"
    value={username}
    onChange={e => setUsername(e.target.value)}
/>

정리

• value와 onChange를 함께 사용하면 입력값을 상태와 연결할 수 있다.
• 입력값 초기화도 상태 변경으로 처리할 수 있다.
• React 폼 처리의 기본 패턴이다.

---

15. 객체 상태로 폼 관리

관련된 여러 입력값은 하나의 객체 상태로 묶어 관리할 수 있다.

const [form, setForm] = useState({
    username: '',
    email: ''
});

공통 이벤트 핸들러를 사용하면 더 효율적이다.

const handleChange = (e) => {
    const { name, value } = e.target;

    setForm({
        ...form,
        [name]: value
    });
};

<input
    type="text"
    name="username"
    value={form.username}
    onChange={handleChange}
/>

정리

• 관련 상태를 객체로 묶으면 관리가 편해진다.
• name 속성과 상태 key를 맞추면 공통 핸들러를 만들 수 있다.
• 전개 연산자를 사용해 기존 상태를 복사한 뒤 필요한 값만 바꾼다.

---

16. Props로 이벤트 함수 전달하기

이벤트 함수도 props로 전달할 수 있다.

이 방식은 재사용 가능한 버튼이나 UI 컴포넌트를 만들 때 자주 사용된다.

function CustomButton({ event, children }) {
    return (
        <button onClick={event}>
            {children}
        </button>
    );
}

<CustomButton event={showWelcomeMessage}>
    환영 메시지 보기
</CustomButton>

정리

• 함수도 props로 전달할 수 있다.
• 부모는 동작을 정의하고, 자식은 그 동작을 실행하는 구조를 만들 수 있다.
• 재사용성과 확장성이 높아진다.

---

17. 핵심 정리

1. React는 createElement()와 render()를 통해 UI를 화면에 출력한다.
2. 컴포넌트는 재사용 가능한 UI 단위이며, 함수형 컴포넌트를 주로 사용한다.
3. JSX는 UI를 더 쉽고 직관적으로 작성하게 해주는 문법이다.
4. JSX에서는 className, onClick, 스타일 객체 등 전용 규칙을 사용한다.
5. props는 부모에서 자식으로 전달되는 읽기 전용 데이터이다.
6. children과 기본값, PropTypes를 통해 컴포넌트를 더 안전하게 만들 수 있다.
7. useState는 함수형 컴포넌트에서 상태를 관리하는 핵심 도구이다.
8. 상태를 이전 값 기준으로 갱신할 때는 함수형 업데이트를 사용해야 한다.
9. React 이벤트는 JSX에서 처리하며, 상태 변경과 연결해 동적인 UI를 만든다.
10. 폼 입력은 상태와 연결하여 관리하고, 객체 상태와 공통 핸들러로 효율적으로 처리할 수 있다.