[React] 리액트 컴포넌트

리액트 파일구조

리액트는 크게 public 폴더와 src 폴더로 구분할 수가 있다.

public 폴더는 정적파일들이 위치해 있다. 예) HTML 파일, 이미지 파일

src 폴더는 동적파일들이 위치해 있는데 주로 사용하는 파일은 .js 또는 .jsx파일이다. 둘 중 아무 파일이나 사용을 해도 상관은 없다. 

 

컴포넌트 란?

Component는 웹 페이지 구성요소들을 재사용이 가능한 독립적인 코드 덩어리라고 표현할 수 있다. 자바스크립트 언어에서 함수의 개념과 비슷하다. 컴포넌트들이 모여 하나의 웹 페이지를 구성한다.

웹 페이지에  Box1, Box2, Box3라는 세 개의 박스를 컴포넌트를 구현하지 않고 한 파일에서 구성해 보았다.

 

만약 저 세 개의 박스에 각각 다른 기능들이 들어 있다면 그 기능들을 구현하기 위한 긴 코드들은 App.js 한 파일 안에 적혀 있을 거고 가독성이 떨어지고 난잡한 느낌이 들것이다. 

 

컴포넌트로 구현해 보기

구현하고 싶은 기능마다 각각 컴포넌트를 만들어준다. components 폴더를 만들고 그 안에 Box1, Box2, Box3 파일들을 위치시켰다. 그리고 박스마다 App.jsx에서 구현했던 기능들을 각각 구현했다.

 

컴포넌트 연결하기

App.jsx에서 만들었던 컴포넌트들을 연결시켜 준다.

컴포넌트를 import 시켜주기.

App 함수 안에 컴포넌트 입력.

 

 

 

 

 

 

 

 

 

리액트를 실행시키면 웹 페이지에 보이는 화면이 똑같을 것이다. 이렇게 기능들을 컴포넌트별로 나누어 구현시키면 나중에 코드 관리가 수월해진다.