[ReactJS] 프로젝트 [2] CRA(create react app)의 장점

Button.js 를 만들고 export를 해주고

index.js 에서 import를 해주자.

하지만 이렇게 컴포넌트를 만들고 사용하지 않으면 Warning 이 뜬다. 이런 점이 create-react-app 를 사용했을 때의 장점이다.

 

이전처럼 컴포넌트를 랜더링 하는 방법 (<Component />,  Props 를 사용하는 방법, 쓸수 있고 다 같지만 이제는 전보다 많은 파일들을 가지게 되었다.

보다 편리하게 코드들을 덜 답답하게 관리할 수 있게 되었다.

 

보다시피 create-react-app을 쓰는 이유는 개발환경이 훨씬 좋기 때문이다.

Button 컴포넌트에 마우스를 올리면 이렇게 필요한 Props 가 뜬다.(매우 매우 유용한 기능이다)

 

이제 PropTypes를 사용해 보자. install 해주어야 한다.

 

아래 무엇이든 둘다 상관없다.

npm install prop-types

npm i prop-types

그리고 Button 컴포넌트에 import 해주자.

CRA로 작업하는 것의 중요성은

코드도 같고 PropType 도 같고 그리고 props를 받는 방법도 같지만 

서로 다른 파일들로 코드를 별도로 관리할 수 있고

그리고 특정 컴포넌트를 위한 CSS를 만들 수 있는 기능이 생겼다는 것이다.

 

보통 CSS를 적용시키려면 

두가지 방법이 있다.

1. styles.css 파일 생성, 코드 작성, css 적용할 js 파일에서 styles.css import

모든 button 태그의 글자색과 배경색을 적용하는 CSS 파일

 

2. style prop을 사용.

작성을 도와주는 자동완성이 제공되는 것 또한 CRA 의 장점이다.

하지만 이건 그냥 1번 보다 못하고 그저 Javascript 코드를 작성해줘야 함과 다르지 않다. HTML 파일에서도 style이 보일 것이다.

 

 

3. create-react-app 의 포인트는 divide and conquer 이다. global CSS를 원하지 않는다면 Style module

Button.module.css 라는 파일을 하나 만들어 주고(이름은 상관이 없다 단지 .module.css 만 붙어 있으면 된다.)

 

 

create-react-app 은 이 css 코드를 JavaScript object로 변환해준다.

create-react-app 은 랜덤 class를 갖는다는 점.( 이게 create-react-app으로 작업할 때의 최고의 장점이라고 한다.) style 도 모듈러가 될 수 있다는 점.

 

고로 이제 동일한 class 이름을, btn 을 다른 파일내에서도 사용할 수 있다. 하지만 create react app 은 랜덤하게 보이는 class를 만들어 내지 

 

App.module.css 도 만들어서 적용하여 줬다.

 

 

이건 훨씬 좋은 것이라고 한다. 왜냐하면 내내 다른 클래스이름을 고민하지 않아도 되고.

컴포넌트나 스타일들을 독립적이게 유지시켜주기에

 

 

 

 

 

https://nomadcoders.co/react-for-beginners/lectures/3280

All Courses – 노마드 코더 Nomad Coders