리액트 컴포넌트 생성 및 활용 가이드: 기본 세팅과 컴포넌트 재사용의 이점

일단 컴포넌트를 작성하기 전에 기본 세팅부터 하겠습니다.

 

index.js 폴더에서 

위의 코드는 index.html에 root라는 id를 가진 div 태그를 리액트 기본 루트 돔으로 쓰겠다는 의미의 코드입니다.

 <App /> 을 감싸고 있는 <React.StrictMode> 를 지워줍니다.

해당 코드는 검사를 위한 코드로 우리가 테스트 프로젝트를 작성할 때 딱히 필요하지 않고

console.log()  사용시 에러가 발생할 수 있습니다.

 

이번에는 App.js에 들어와서  import logo from './logo.svg'; 와 <div className="App"> 태그 안에 있는 코드를 지워줍니다.

또한 스타일에 관련된 index.css    app.css 안에 코드들도 지워줍니다.

해당 코드는 기본 스타일로써 내장되있던것입니다.

 

위와 같이 비워준 화면입니다. 저는 <div> 태그도 프레그먼트 태그로 비워주었습니다.

 

이제 컴포넌트를 하나 만들어 봅시다.

componets라는 폴더 를 생성하고 안에 Buttin.js라는 컴포넌트를 작성해봅시다.

컴포넌트를 작성할 때는 대문자로 시작한다는 것을 명심해 주세요~

다음과 같이 작성해 줍니다.

위처럼 기본적인 구조의 코드를 편하게 작성하고 싶다면 

vs code에 확장 프로그램 snippets을 설치하여

 

단축기

rafce 를 사용할 수 있다.

 

 

이제 App.js로 다시 와서

Button 컴포넌트를 사용합니다.

 

마지막으로 터미널에서 npm start를 하면 

 

해당 화면 처럼 컴포넌트가 나타난것을 볼 수 있다.

리액트는 이렇게 컴포넌트로 이루어진다. 이것의 장점은 재사용이 가능하고 작은 요소들로 나누어 조립하듯이 

웹을 구성할 수 있다는 것이다. 

 

다음 시간에는 JSX 에 대하여 알아보자.