[모각코]React 시작하기(6)_create-react-app

이번주차에는 드디어 node.js로 react app을 만들어보고

앞선 코드작성방식과 차이점에 대해서 알아보았다

create-react-app

node.js를 설치하고 npm 명령어를 이용하여
npm create-react-app 만들고싶은 폴더이름
을 치면 react 로고가 뺑글뱅글 돌아가고있을거다.

노마드코더 강좌에서는 일단 당장 사용하지않을 app.test.js나 css파일 등등 모두 제거하고
app.js랑 index.js만 우선 사용하고 필요없는거 다 삭제해서 아래와 같이 결과물이 나왔다.'

개인적으로 처음 react 공부할때 제일 어려웠던게(kotlin 처음배울때도 마찬가지로) 알수없는 파일이 막 있는게
굉장히 부담스러웠는데 날리니까 한결나았다 휴

index.html 여는것같이 습관처럼 js 파일눌렀는데 실행안되서 놀람..

실행할때는 터미널에 해당 생성된 폴더위치에서(폴더를 생성한 위치말고 생성된 폴더 내부에서!)
npm start를 치면된다.

+export 구문 추가해주기
앞선 5회차에서 html파일로만 작성해주던것과 달리
이제부턴 주로 컴포넌트 단위로 파일을 작성해주면된다.
따라서 파일을 서로 import 해오는 방식으로 적용하므로
맨 밑에

export default 컴포넌트 이름

해당 구문을 추가해주어야한다.

proptypes 설치하기

앞시간에 봤던 propTypes는 따로 설치해야하는 설치방법은 npm i prop-types 혹은 npm add prop-types이다.
근데..

자꾸 이런 오류가 떴다ㅠㅠ
https://github.com/facebook/create-react-app/issues/11174

Help, `npm audit` says I have a vulnerability in react-scripts! · Issue #11174 · facebook/create-react-app

역시나 구글링해보니 나와 똑같은 사람이 있어서 package.json도 수정해보았는데 계속 나한테 6개 높은 취약점이 있다고 한다
ㅠㅠ결국 이번 모각코시간에는 넘기구 계속 구글링해보기로하고 마저 강의들었다
꼭...해결하길...
syntax는 저번 포스팅에서 아주 자세히 다뤘으므로 스킵하겠다!

style 적용하는법

style을 적용하는 방법은 크게 두가지가있다고 한다

여기에 버튼 컴포넌트를 생성하고, 여기에스타일을 적용하는 예제로 여러방식을 적용해보았다.
1. style.css import하기 / props로 style 설정

1-1 style.css import

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './style.css'
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
//App.js
import Button from './Button'
function App() {
  return (
    <div>
      <h1>Welcome react!</h1>
      <Button text = {"hi"}/>
    </div>
  );
}

export default App;
//Button.js
function Button({text}){
    return(
        <button>{text}</button>
    );
}

export default Button;

//style.css
button{
 color : white;
 background-color: tomato;   
}

이렇게 style.css를 import하면, App 컴포넌트안에있는 버튼 컴포넌트이던 아님 다른 버튼이던 싹다 tomato 색깔로 될것이다

1-2. 컴포넌트 내부에서 스타일 설정

//Button.js
function Button({text}){
    return(
        <button
        style = {{
 		color : white;
 		background-color: tomato;   
        }}>{text}</button>
    );
}

export default Button;

이렇게하면 다른버튼들은 토마토색깔은 면할수있다.

이에 더불어 앞서 props로 style을 전달해줄수도있다!

그치만..!미리 css 파일로 전달할수는 없는걸까?
2.style.module

//Button.module.css
.btn{
 color : white;
 background-color: tomato;   
}

//Button.js
import styles from './Button.module.css'
function Button({text}){
    return(
        <button className = styles.btn>{text}</button>
    );
}

export default Button;

위와 같이 css 파일앞에 컴포넌트이름.module을 붙여주는것이다!

그러면 styles를 import해와서 위와같이 내가 원하는 버튼만 토마토색으로 만들수있다.

여기까지 학습하고 후반부에는 향후 모각코 팀원들과 함께 진행할 프로젝트에 대해서 상의해보았다