3. react 화면 기본구조
React는 컴포넌트 기반의 사용자 인터페이스를 구축하기 위해 널리 사용되는 라이브러리입니다.
이 글에서는 React 애플리케이션의 기본 폴더 구조와 화면 구조, 기본 동작 방식을 이해할 수 있도록 설명하겠습니다.
1) react 폴더구조
React 애플리케이션을 생성하면 다음과 같은 폴더 구조가 생성됩니다.
- node_modules : npm으로 설치된 패키지가 저장되는 폴더입니다. 프로젝트의 의존성을 관리합니다.
- public : 정적 파일을 저장하는 폴더입니다. 여기에는 index.html 파일이 포함됩니다.
- src : 애플리케이션의 소스 코드가 포함된 폴더입니다. 여기에서 대부분의 작업이 이루어집니다.
public 폴더
public 폴더 안에는 index.html 파일이 있습니다.
이 파일은 React 애플리케이션의 싱글 페이지입니다.
React의 CSR(Client-Side Rendering) 구조에서는 이 파일이 모든 페이지를 렌더링하는 데 사용됩니다.
SEO 처리가 어려운 이유는 이 파일 하나에서 모든 페이지가 동적으로 렌더링되기 때문입니다.
반면, Next.js는 SSR(Server-Side Rendering) 구조로, 페이지마다 개별적인 태그 및 타이틀 설정이 가능해 SEO에 더 유리합니다.
그래서 동적으로 여러 게시판의 title과 meta태그 설정이 어려워, SEO처리가 어렵습니다. (저는 그래서 해당 블로그를 next.js 환경으로 재작업 하였습니다.)
next.js의 경우 SSR구조로 페이지마다 태그 및 title 설정이 가능하여 웹사이트 검색 노출에 좀 더 유리합니다.
2) 이미지예시
index.html에서 중요한 부분은 <div id="root"></div> 입니다. React 애플리케이션은 이 root 엘리먼트에 렌더링됩니다.
src 폴더 안에는 index.js와 App.js 파일이 있습니다. index.js 파일은 React 애플리케이션의 진입점이며, App.js는 주요 컴포넌트를 포함합니다.
위 코드에서 ReactDOM.render 함수는 App 컴포넌트를 root 엘리먼트에 렌더링합니다.
우리의 작업은 App.js 에서부터 시작됩니다. App.js에 화면에 보여줄 컴포넌트를 추가를 해주시면 됩니다.
App.js
App.js는 애플리케이션의 주요 컴포넌트를 정의하는 파일입니다. 여기에서 다른 컴포넌트를 불러와서 렌더링합니다.
위 소스에 대해 간략히 설명하면 아래와 같은 구조로 되어 있습니다.
위 코드에서 App 컴포넌트는 Router와 Route를 사용하여 네비게이션을 설정합니다.
Navigation 컴포넌트는 네비게이션 메뉴를 표시하고, Switch와 Route는 URL 경로에 따라 다른 컴포넌트를 렌더링합니다.
소스파일명은 반드시 대문자로 시작해야 합니다.
실제로 메뉴를 클릭하여 소개메뉴를 보면
1번의 경우 필요한 컴포넌트, css파일 등 import처리
2번의 경우 변수선언 및 함수선언
3번의 경우 화면에서 보여줄 html태그 선언하는 부분입니다.
변수선언 시 const [isLoginYn, setIsLogin] = useState(false); 구조로 선언을 하는데 이 부분이 다른 언어들의 변수선언과 조금 다릅니다.
useState 훅을 사용하여 상태를 관리합니다.
const [변수명, 변수상태변경함수] = useState(초기값);
html부분에서 해당 변수를 사용할 때는 <p>isLoginYn : {isLoginYn}</p> 형태로 데이터를 보여줍니다.
React는 CSR(Client-Side Rendering) 구조를 사용하므로 SEO에 약점이 있지만, Next.js와 같은 프레임워크를 사용하면 SSR(Server-Side Rendering)을 통해 이를 보완할 수 있습니다.
React의 폴더 구조와 각 파일의 역할을 명확히 이해하고, 컴포넌트 기반의 설계를 통해 유지보수와 확장성을 높일 수 있습니다.
읽어주셔서 감사합니다! 😊