리액트 강좌: 처음 만나는 자바스크립트

안녕하세요! 이번 강좌에서는 리액트(React)와 자바스크립트(JavaScript)에 대해 깊이 있게 알아보도록 하겠습니다. 우리가 사용할 리액트는 컴포넌트 기반의 라이브러리로, 사용자 인터페이스(UI)를 구축하는 데 매우 유용합니다. 동시에, 자바스크립트는 리액트를 이해하고 활용하는 데 꼭 필요한 언어입니다. 자바스크립트를 처음 접하는 분들을 위해 자바스크립트의 기본 개념부터 시작할 것입니다.

1. 자바스크립트의 이해

자바스크립트는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어입니다. HTML과 CSS와 함께 웹의 핵심 기술 중 하나로 자리 잡고 있습니다. 자바스크립트를 통해 우리는 웹 페이지에 동적인 기능을 추가하고, 사용자와 상호작용할 수 있도록 만들 수 있습니다.

1.1 자바스크립트의 역사

자바스크립트는 1995년 브렌던 아이크(Brendan Eich)에 의해 처음 개발되었습니다. 초기에는 브라우저 내에서 간단한 스크립트를 작성하는 용도로 사용되었지만, 시간이 지나면서 복잡한 애플리케이션 개발에도 사용되기 시작했습니다.

1.2 자바스크립트의 기본 문법

  • 변수 선언: 변수를 선언할 때는 var, let, const를 사용합니다. let과 const는 블록 스코프를 가지며, const는 재할당이 불가능한 상수를 선언합니다.
  • 데이터 타입: 자바스크립트는 다양한 데이터 타입을 지원합니다. 주된 데이터 타입은 다음과 같습니다:
    • 숫자(Number)
    • 문자열(String)
    • 불리언(Boolean)
    • 객체(Object)
    • 배열(Array)
    • Null
    • Undefined
  • 함수: 함수를 정의할 때는 다음과 같이 작성합니다: 
    function sayHello(name) {
    return "안녕하세요, " + name + "님!";
}

2. 리액트에 대한 이해

리액트는 페이스북에서 개발한 자바스크립트 라이브러리로, 사용자 인터페이스를 구축하는 데 매우 유용합니다. 리액트는 컴포넌트 기반 구조를 통해 UI를 독립적인 조각들(컴포넌트)로 나누어 관리할 수 있게 해줍니다.

2.1 리액트의 특징

  • 컴포넌트 기반: 애플리케이션의 UI를 여러 개의 독립적인 컴포넌트로 나누어 더 쉽게 관리할 수 있습니다.
  • 가상 DOM: 리액트는 가상 DOM을 사용하여 실제 DOM의 변경을 최소화하고 성능을 최적화합니다.
  • 단방향 데이터 바인딩: 데이터가 상위 컴포넌트에서 하위 컴포넌트로 흐르기 때문에 데이터의 흐름을 명확하게 이해할 수 있습니다.

2.2 리액트 설치 및 환경 설정

리액트를 사용하기 위해서는 노드.js(Nodes.js)와 npm(Node Package Manager)을 설치해야 합니다. 설치 후, 아래의 명령어를 사용하여 새로운 리액트 프로젝트를 생성할 수 있습니다:

npx create-react-app my-app

이제 프로젝트 디렉토리로 이동합니다:

cd my-app

3. 첫 번째 리액트 컴포넌트 만들기

이제 리액트 컴포넌트를 만들어 봅시다. 기본적으로 리액트 컴포넌트는 자바스크립트 함수 또는 클래스로 정의됩니다. 다음은 함수형 컴포넌트를 만드는 예시입니다:

import React from 'react';

function HelloWorld() {
    return 
안녕하세요, 리액트!
;
}

export default HelloWorld;

위 코드에서 HelloWorld라는 이름의 컴포넌트를 정의하고, 이 컴포넌트를 통해 화면에 “안녕하세요, 리액트!”라는 문구를 표시합니다.

3.1 컴포넌트 사용하기

만든 컴포넌트를 다른 파일에서 사용하려면, 해당 컴포넌트를 import 하여 JSX 태그로 사용할 수 있습니다. 예를 들어:

import HelloWorld from './HelloWorld';

function App() {
    return (
        

            
        

    );
}

export default App;

4. JSX의 이해

리액트에서는 JSX(JavaScript XML)를 사용하여 UI를 정의합니다. JSX는 자바스크립트 코드 안에서 HTML을 작성할 수 있는 문법입니다. JSX를 사용하면 코드를 더 읽기 쉽게 만들 수 있습니다.

4.1 JSX 문법

  • JSX는 HTML과 유사하지만, class 대신 className을 사용해야 합니다.
  • 태그에 중괄호({})를 이용하여 자바스크립트 표현식을 삽입할 수 있습니다.
  • 여러 JSX 요소를 반환하려면 반드시 하나의 부모 요소로 감싸야 합니다.

5. 상태 관리와 생명주기

리액트에서는 컴포넌트의 상태(state)를 관리하고, 생명주기 메서드를 통해 컴포넌트의 생성과 소멸을 제어할 수 있습니다.

5.1 상태 관리

import React, { useState } from 'react';

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

    return (
        

            
현재 카운트: {count}

            
        

    );
}

export default Counter;

위의 예시에서 useState 훅을 사용하여 컴포넌트의 상태를 관리하고 있습니다. 버튼을 클릭할 때마다 카운트가 증가합니다.

5.2 생명주기 메서드

생명주기 메서드는 컴포넌트의 생성, 업데이트, 소멸 과정에서 호출되는 메서드입니다. 클래스형 컴포넌트에서는 아래와 같은 생명주기 메서드를 사용할 수 있습니다:

class MyComponent extends React.Component {
    componentDidMount() {
        console.log('컴포넌트가 마운트되었습니다.');
    }

    componentDidUpdate() {
        console.log('컴포넌트가 업데이트되었습니다.');
    }

    componentWillUnmount() {
        console.log('컴포넌트가 언마운트됩니다.');
    }

    render() {
        return 
리액트 생명주기
;
    }
}

6. 이벤트 처리

리액트에서는 HTML의 이벤트를 아주 쉽게 처리할 수 있습니다. 이벤트를 처리할 때는 onClick이나 onChange와 같은 속성을 사용합니다.

function App() {
    const handleClick = () => {
        alert('버튼이 클릭되었습니다!');
    };

    return ;
}

7. 외부 API 사용하기

리액트를 사용하여 외부 API와 통신하는 방법을 알아보겠습니다. 예를 들어, fetch()를 사용하여 데이터를 가져오는 방법입니다.

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

function DataFetching() {
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/posts')
            .then(response => response.json())
            .then(data => setData(data));
    }, []);

    return (
        
    
            {data.map(post => (
                
  • {post.title}
    • 
            ))}
        

    );
}

export default DataFetching;

8. 결론

이번 강좌에서는 리액트와 자바스크립트의 기본 개념을 깊이 있게 살펴보았습니다. 리액트는 현대 웹 개발에서 매우 중요한 기술 중 하나입니다. 앞으로 더 많은 활용법과 최적화 기법을 배워나가게 될 것입니다. 리액트를 배우는 여정이 여러분에게 도움이 되길 바랍니다!

참고 자료