[react web] 시작 후 파일 정리

우리는 아래의 url에서 프로젝트를시작하는 방법을 알아보았다.

 

2021.11.01 - [Web/React] - [react web] 시작하기

 

 

처음시작하면 아래와 같이 파일 구조가 보인다. 

 

 

그리고 npm start를 사용하면, 아래와 같은 화면이 뜬다. 이제 프로젝트 시작하기 위한 첫 setting에 대해 알아보자

 

 

 

app.js에 들어가면 아래와 같다.

먼가 많아 보인다. 필요 없는 것을 깔끔히 지우면 아래와 같이 된다.

 

 

끝이다. hi를 넣어보자.

 

 

 

이렇게 하면 기본 준비가 다 된것이다. 물론 파일 정리를 깔끔해게 해도된다. 하지만, 초보자 기준으로는 핵심은 화면이고 화면정리는 app.js에서 하는 것을 우선적으로 이해를 한 후에 파일 정리를 하면 된다.

 

 

 

추가로 중앙 정렬만 CSS를 추가해 주면 아래와 같다. 

 

function App() {
  return (
    <div style={{ textAlign : 'center' }}>
      hi
    </div>
  );
}

export default App;

 

 

기본 세팅 끝!!!!! 

 

+ 파일정리는 스스로 직접 해보는 것을 추천한다. 필요없는거 같은것들은 과감히 지워보고 오류가 뜨는지 확인을 하면서 오류를 잡아나가자.

 

 

이제 리액트를 쓰는 이유와 장점을 생각해 보면서 컴포넌트를 만들어 보자.

 

2021.10.26 - [Web/React] - [react web] 컴포넌트 만들기