React를 본격적으로 알아보기 전에 기본 개념부터 알고 갑시다!
✨ 들어가기 전에...
한 달 전쯤 저는 React의 중요한 핵심 중 하나인 컴포넌트(구성 요소)에 대해서 포스팅을 하였습니다!
해당 포스팅에서는 컴포넌트의 간단한 설명과 클래스형 컴포넌트와 함수형 컴포넌트에 대해서 알아보았습니다.
하지만 저를 포함한 리액트를 처음 시작하고 배우는 사람 입장에서는 기본 개념부터 이해하고 하나씩 알아가는 것이 더 좋다고 생각하였습니다!
그래서 이번 시간에는 React의 기본 개념 소개하는 포스팅을 작성해보겠습니다~
📃 컴포넌트(구성 요소)
컴포넌트란?
컴포넌트에 대해서는 저번 포스팅에 간단히 설명해 드렸지만 이번에 다시 소개해보겠습니다.
리액트 앱은 컴포넌트(구성 요소)로 이루어지고 만들어집니다.
쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있습니다!
레고로 만든 성을 리액트 앱이라고 비유한다면 컴포넌트는 하나의 레고 블록이라고 할 수 있습니다.
하지만 컴포넌트는 버튼만큼 작을 수도 있고 전체 페이지만큼 클 수도 있습니다.
컴포넌트 생성 및 중첩
React 컴포넌트는 마크업을 반환하는 JavaScript 함수입니다.
function MyButton() {
return (
<button>I'm a button</button>
);
}위 컴포넌트 예시 코드에서 살펴볼 핵심은 세 가지입니다.
- 사용자 정의 컴포넌트는 반드시 대문자로 시작해야 합니다.
- 그와 반대로 컴포넌트 안에 있는 HTML 태그는 소문자로 시작해야 합니다.
- 컴포넌트는 마크업을 반환(return)하는 형식을 가집니다.
해당 사항들은 JSX 문법과 연관이 있으므로 밑에서 바로 소개하겠습니다!
MyButton 컴포넌트를 생성하였으니 이제 다른 컴포넌트에 중첩을 해보겠습니다.
export default function MyApp() {
return (
<div>
<h1>Welcome to my app</h1>
<MyButton />
</div>
);
}<MyButton /> 위와 같은 방식으로 컴포넌트 안에 다른 컴포넌트를 중첩할 수 있습니다.
export
export 키워드는 컴포넌트를 다른 파일로 내보낼 때 사용하는 키워드입니다.
다만 여기서 export default가 무슨 키워드인지 저는 무척 궁금했습니다.
export default ES6(ES2015) 모듈 시스템의 한 부분입니다.
export default는 해당 모듈에서 기본으로 내보낼 값을 지정합니다.
한 모듈에는 하나의 export default가 있을 수 있습니다.
export default가 붙은 함수나 클래스 등은 해당 모듈을 import할 때 특별한 이름 없이 가져올 수 있습니다.
예를 들어, MyApp 함수는 export default로 내보내고 있습니다.
다른 파일에서 이 함수를 사용하려면 다음과 같이 import하면 됩니다.
import MyApp from './파일경로';이렇게 import하면, 해당 파일에서 기본으로 내보낸 MyApp 함수를 가져올 수 있습니다.
기본 내보내기는 해당 모듈에서 가장 중요한 값을 내보낼 때 유용하며, 각 모듈에서는 한 번만 사용할 수 있습니다.
그와 대조적으로, export만 사용하면 특정 이름으로 내보낼 수 있습니다.
이렇게 내보낸 값은 {}를 사용해 import해야 합니다. 이를 명명된 내보내기(named export)라고 합니다. 한 모듈에서는 여러 번 사용할 수 있습니다.
// export를 사용해 MyButton 컴포넌트를 내보냅니다.
export function MyButton() {
return <button>I'm a button</button>;
}
// 다른 파일에서 MyButton을 import하려면 다음과 같이 하면 됩니다.
import { MyButton } from './파일경로';Props 그리고 State
Props(속성)
Props는 properties(특성)의 약자로, 컴포넌트 간에 데이터를 전달할 때 사용합니다.
보통 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하게 됩니다.
Props는 읽기 전용으로, 컴포넌트 내에서 변경할 수 없습니다.
예를 들어, 특정 컴포넌트에서 메시지를 출력하고 싶다고 할 때 이 메시지를 props를 통해 전달할 수 있습니다.
function MessageComponent(props) {
return <h1>Hello, {props.message}</h1>;
}
function App() {
return <MessageComponent message="World!" />;
}State(상태)
State는 컴포넌트 내부에서 관리되는 데이터로, 사용자와의 상호작용에 따라 변경될 수 있습니다. State가 변경되면, 컴포넌트는 자동으로 다시 렌더링됩니다.
함수형 컴포넌트에서는 useState라는 React Hook을 사용해 state를 관리할 수 있습니다.
useState는 새로운 상태 변수를 선언하고, 이 변수를 업데이트하는 함수를 제공합니다.
예를 들어, 버튼 클릭에 따라 숫자가 증가하는 컴포넌트는 다음과 같이 구현할 수 있습니다.
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // state를 선언하고 초기값은 0으로 설정합니다.
return (
<div>
<p>{count} 번 클릭하였습니다!</p>
<button onClick={() => setCount(count + 1)}>클릭해주세요</button>
</div>
);
}
이제 로컬 개발 서버를 사용하여 확인해보면 버튼을 클릭할 때 마다 숫자가 올라가는 것을 확인할 수 있습니다!
📃 JSX 마크업
위에서 예시로 보여준 코드를 살펴보면 HTML와 JavaScript를 묘하게 섞은 느낌이 듭니다!
이러한 마크업 구문은 React의 핵심적인 부분 중 하나인 JSX라고 합니다.
JSX (JavaScript XML)는 JavaScript를 확장한 문법으로, JavaScript 내부에 마크업 코드를 작성할 수 있게 해줍니다. 이를 통해 보다 직관적이고 읽기 쉬운 코드를 작성할 수 있습니다.
예를 들어, 기본적인 JSX는 다음과 같이 작성합니다.
const element = <h1>Hello, world!</h1>;JSX는 마치 HTML처럼 보이지만, 실제로는 JavaScript입니다.
따라서 JSX에서도 JavaScript 표현식을 중괄호 {} 안에 쓸 수 있습니다.
const name = '연진';
const element = <h1>Hello, {name}</h1>;이 외에도 위에서 컴포넌트를 생성하면서 보여드린 예시 코드들도 모두 JSX로 작성된 코드입니다.
이런 식으로, JSX는 JavaScript와 HTML의 유사한 구문을 결합하여, 사용자 인터페이스를 더욱 쉽게 구현할 수 있도록 도와줍니다.
한 가지 주의할 점은, JSX는 JavaScript XML의 약자이지만 실제 XML이나 HTML과는 약간 다릅니다.
예를 들어, HTML에서는 class 속성을 사용하지만, JSX에서는 className 속성을 사용해야 하며, style 속성도 객체 형식으로 작성해야 합니다.
<img className="avatar" />마지막으로, JSX는 필수가 아닙니다.
React를 사용할 때 JSX 없이도 컴포넌트를 생성하고 렌더링할 수 있습니다
하지만, JSX를 사용하면 코드가 보다 간결하고 이해하기 쉬워져서 대부분의 React 개발자들이 JSX를 선호합니다.
📃 참조
