~0515 REACT 프로젝트 시작 발등에 불

귀여워

본격적으로 프로젝트가 시작되었다. 지금껏 만든 방식 그대로 Button을 한 개 만들어 볼 것이다.

export 배웠나? import 반대로 생각하려다 찾아 보기로했다.

자바스크립트에서는 애플리케이션을 실행하기 위해 한 파일에서 코드를 작성하기에는 너무 불편한 점이 많기에

하나의 파일을 여러개로 쪼개는 것이 가능한데, 그때 사용하는 것이 import와 export이다. 

export를 붙인 모듈은 파일 외부에서도 import를 통해 사용할 수 있다. 두 파일의 오작교 같은 역할이다.

지금 위의 line5에서도 이 버튼을 외부에서 즉 index.js에서 사용하기 위해 적은 것이다.

 

강의에서 PropTypes로 하는데 오류가 떠서 propTypes떠서 수정했다

비교적 되게 최근에 한 것들이 여러 보인다. Button.js에서 Button을 만들고 Button {text}에 들어갈 형식을

string으로 정해주는 propTypes를 npm i 를 통해 설치하고, 틀려도 표현해주도록 isRequired도 작성했다.

다만, 저번과 다른 점이 있다면 여러 파일로 분할해서 사용하고 있다는 점이다. 한 파일 내에서 버튼을 만들고 그걸 바로

파일 내에서 사용했다면 이번에는 button.js라는 button을 생성하고 propTypes를 설정하는 파일 자체를 제작한 것.

또한 기존의 방식과 다르게 css에 접근하는데

1. .css파일을 만들어서 접근하는 방법, css파일 제작 후 index.js서 import "~. css" (너무 설정 범주가 넓다)
2. js파일 내부에서 button 내부에 스타일을 걸어 적용 시키는 것 (분할 가능)

에러떴는데 이유는 line3 style={{~ 등호를 까먹었다.

2번 방법에서 조금 변화를 주어 css파일을 만들지만, 분할가능하도록 해볼 것이다.

 

Button.module.css라는 css파일을 만든다. Button.js에서 import styles from"./Button.module.css"; 작성

ㄴ> .css이름앞에 module을 작성함으로 클래스의 중첩을 막을 수 있다.

 

button태그 앞의 className={styles.btn}을 작성해준다. 이럴 경우 html상에서 button은 btn이라는 클래스를 같지만,

클래스명은 랜덤함으로 우리가 btn의 스타일을 사용할 때 매번 클래스 명을 외우지 않고 분할해서 사용할 수 있다.

 

왼쪽과 오른쪽 버튼, h1태그에 필요한 style양식을 작성하고 각각 랜덤 클래스명을 갖게되어 독립적으로 같은 스타일을 사용 가능

여기서도 확인할 수 있는 ReactApp 그리고 js의 특징은 각 파일 하나에 컴포넌트 하나를 배정해 모듈화가 가능하다는 것이다. 예전 class btn을 하고 모든 btn이 같은 속성을 갖고 독립화 하기 힘들었던 과거 와는 다르게 유연하게 작성이 가능해졌다.