📑 [React] App React

 

 

React로 만든 웹 서비스들은

보통 React App, React Application이라고 부른다.

 

그 이유는 리액트로 만들어진 대다수의 웹 서비스들은 단순한 웹 페이지의 기능을 넘어서

사실상 애플리케이션에 가까울 정도로 매우 다양한 기능들을 제공하고 있기 때문에,

마치 단순한 웹이 아니라 웹 브라우저 위에서 동작하는 애플리케이션과 같다고 하여,

보통은 리액트 웹 또는 리액트 애플리케이션이라고 부른다.

 

 

리액트 앱은 굉장히 다양한 방식으로 생성할 수 있는데요, 사실 리액트 또한 이렇게 npm에 등록된

자바스크립트 라이브러리이기 때문에 node.js 패키지를 하나 만들고,

패키지에 리액트라는 라이브러리를 설치하고 마지막으로 리액트를 좀 더 편하게 사용하기 위한

추가적인 도구를 설치하면 됩니다.

---

src 폴더

src는 "source"의 약자로, 소스 코드 파일들이 위치하는 디렉터리입니다. 대부분의 프로젝트에서 src 폴더는 실제 애플리케이션의 로직, 컴포넌트, 서비스, 유틸리티 함수 등과 같은 중요한 코드들이 포함됩니다. 이 폴더는 다음과 같은 이유로 사용됩니다:

• 코드 조직화: 소스 파일들을 한 곳에 모아 프로젝트의 구조를 명확하게 합니다.
• 빌드 시스템: 빌드 도구(예: Webpack, Parcel, Vite)들이 src 폴더를 기준으로 애플리케이션을 번들링 하도록 설정하는 경우가 많습니다.
• 유지보수: 코드의 유지보수를 용이하게 하고, 개발자들이 필요한 파일을 쉽게 찾을 수 있게 합니다.

assets 폴더

assets는 일반적으로 이미지, 폰트, 스타일시트, 비디오 등과 같은 정적 파일들을 포함하는 디렉터리입니다. 이 폴더의 목적은 다음과 같습니다:

• 정적 리소스 관리: 정적 파일들을 한 곳에 모아 관리하고, 소스 코드와 분리하여 정리된 프로젝트 구조를 유지합니다.
• 빌드 과정: 빌드 도구들이 assets 폴더를 참조하여 정적 파일들을 적절한 위치에 배치하고, 필요할 경우 최적화합니다.
• 프로젝트 구조 개선: 정적 리소스와 소스 코드를 분리하여 프로젝트의 가독성과 유지보수성을 높입니다.

이 두 폴더는 특별한 유래라기보다는 웹 개발에서 코드와 정적 리소스를 구조적으로 잘 관리하기 위한 일반적인 패턴입니다. 대부분의 프레임워크와 라이브러리(리액트, 앵귤러, 뷰 등)에서도 이와 유사한 폴더 구조를 사용하여 개발자들이 더 쉽게 프로젝트를 이해하고 작업할 수 있도록 돕고 있습니다.

 

 

리액트를 설치하고 src 폴더를 확인하면 assets에  App.jsx를 확인할 수 있다.

import "./App.css";

function App() {
	return (
    <>
    	<h1>안녕 리액트 </h1>
    <>
    );
		
}

export default App;

 

해당 파일에는 위 코드 처럼 HTML 태그를 반환하는 App이라는 함수를 확인할 수 있다.

 

리액트에서 자바스크립트 함수가 HTML 태그를 반환하도록 설정할 수 있으며,

이렇게 HTML 태그들을 반환하는 함수를 특별히 "컴포넌트"라고 부른다.

 

그리고 이 컴포넌트를 부를 때에는 보통 이 함수의 이름을 따서 부릅니다.

따라서 위 코드의 이름은 App 컴포넌트가 됩니다.

 

주의해야하는 점은 컴포넌트를 생성하는 함수의 이름은 반드시 첫 글자가 대문자가 되어야합니다.

소문자로 작성하는 경우 리액트에서 내부적으로 이 함수를 컴포넌트라고 인정하지 않습니다.

 

즉, 단순하게 생각하여 함수를 평범하게 만들고 해당 함수가 html 태그들을

return 하도록 만들어 주게 되면 리액트의 함수 컴포넌트가 된다는 뜻입니다.

 

import "./App.css"

const Header = () => {
	return (
    <header>
    	<h1>header</h1>
    </header>
    );
};

 

함수 선언식 말고도 이렇게 화살표 함수로 바꿔서 컴포넌트를 만들어 주실 수도 있습니다.

 

또한 이런 함수말고도 클래스를 이용해서 컴포넌트를 마나들 수 있긴 하지만 클래스를 이용하면

우리가 직접 작성해야 되는 코드의 양이 굉장히 많아져서 이렇게 함수를 이용해서 컴포넌트를 만드는 게

훨씬 일반적이고 대중적이어서 함수를 이용해서만 컴포넌트를 만들어주는 것이 권장된다.

 

 

리액트 앱이 컴포넌트를 화면에 렌더링 시켜주는지 확인하기 위해서는 main.jsx를 확인해야합니다.

render() 메서드를 통해서 화면에 렌더링하고 있는 컴포넌트는 바로 App 컴포넌트로 설정되어 있습니다.

 

 

import "./App.css"

const Header = () => {
	return (
    <header>
    	<h1>header</h1>
    </header>
    );
};

function App() {
	return(
    	<>
        	<Header />
    		<h1>안녕 리액트!</h1>
    	</>
	);
}

 

그렇기 때문에 App.jsx파일의 App 컴포넌트는 잘 렌더링이 되고 있지만 새로 추가한 Header 컴포넌트는

화면에 렌더링이 되고 있지 않습니다. 그렇기 때문에 우리가 방금 만든 이 Header 컴포넌트를 화면에 렌더링

시켜주기 위해서는 App 컴포넌트의 return 안에 꺽쇠를 열고 header라고 해서 HTML 태그를 작성하듯이

Header 컴포넌트를 배치시켜 주면 App 컴포넌트가 화면에 렌더링 될 때 Header 컴포넌트의 반환 값을 불러와서

함께 렌더링 시켜주게 됩니다.

 

이렇게 리액트 컴포넌트에 대해서 가볍게 살펴 보았습니다.

이제는 컴포넌트들을 각각의 파일로 분리해주는 작업을 통해 모듈화 작업을 해보겠습니다.

 

보통 리액트의 컴포넌트들은 지금처럼 하나의 파일에 다 모아서 작성하는 것이 아니라

모듈화를 위해서 컴포넌트별로 각각 파일을 나눠서 작성하는게 좀 더 일반적입니다.