[TIL] 유데미X사람인 취업 부트캠프 11일차 / react

1. React란?

- 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리

- 브라우저의 자바스크립트를 사용해 웹페이지와페이지에 표시되는 사용자 인터페이스를 재로딩없이 업데이트함

- 자연스러운 화면 전환 가능

 

2. 필요한 이유

- 자바스크립트만 사용하는 것은 번거롭고 오류도 발생하기 쉬움

- 리액트는 코드 내에 html코드 삽입 가능

- 복잡한 애플리케이션을 구축할 때 효과적

 

3. 바닐라 자바스크립트 vs 리액트

- 바닐라 자바스크립트는 명령형으로 작성 => 거쳐야 할 단계 정의

- 리액트는 선언형으로 작성

 

4. 리액트 프로젝트 생성하기

- React - CodeSandbx를 사용해서 프로젝트를 생성하면 node.js 실행 명령어를 쓸 필요가 없다

 

5. 자바스크립트 주요 내용

- 인라인 방식보다 자바스크립트 파일을 import하는 방식이 더 깔끔

- <script src="example.js" defer></script>

- 위의 defer 대신 type="module"을 추가하면 자바스크립트 파일을 모듈로 인식

- 모듈로 인식하면 import/export라는 주요 문법을 사용할 수 있음

 

7. import와 export

- export를 사용하면 현재 파일의 속성을 다른 파일에 공유할 수 있다

- import를 사용하면 export가 있는 다른 파일의 속성을 공유받을 수 있다

- 예시

import  * as util from "./util"

 

8. JS복습 - 화살표 함수

- 익명 함수를 다룰 때 사용하는 문법

- 익명함수 : 이름이 없는 함수

- 예시

export default(userName, message) => {
    console.log('hello');
    return userName + message;
}

- 화살표 함수를 다룰 때에는 구문 단축키를 사용할 수 있음

- 하나의 매개변수만 사용할 때에는 소괄호를 생략할 수 있음

- 매개변수가 아예 없는 경우에는 괄호를 생략학 수 없음

- 소괄호 안에 중괄호를 추가하면 객체를 생성하는 것

 

9. JS복습 - map()

- 배열 안의 값들을 수정하는 것

//transformToObject라는 이름의 함수를 만든다
//함수는 숫자가 담긴 배열을 받으면 val:숫자 형식으로 반환해야한다

let numberArray = [1, 2, 3];

function transformToObject(numberArray){
    return numberArray.map(number => return {val:number});
}

 

10. 리액트 사용하기

- node.js 설치

- 터미널에 npm create vite 입력

- y입력 

- 프로젝트 이름 입력

- React 선택

- javascript 선택

- 프로젝트 생성 완료

- VSCODE로 실행

- 터미널에 npm install과 npm run dev를 차례로 입력

- 터미널의 url을 입력하면 미리보기 창이 뜬다

 

11. 리액트로 커스텀 컴포넌트 만들기

- 컴포넌트를 사용하는 곳에서 컴포넌트의 이름은 대문자로 시작해야한다

- 따라서, 컴포넌트를 만들 때 대문자로 시작하도록 해야한다

- 동적인 값을 추가하고 싶다면, 중괄호 {}를 사용해야 한다

- Post.jsx

const names = ['Maximilian','Manuel'];	//이름 배열을 선언한다

function Post() {	//문장을 출력시키는 Post함수를 만든다
    const chosenName = Math.random() > 0.5 ? names[0] : names[1];	//이름고르기
    return <div>
        <p>{chosenName}</p>	//고른 이름 출력하기
        <p>React.js is awesome!</p>
    </div>
}

export default Post;	//Post함수 내보내기

- App.jsx

import Post from './components/Post'	//Post.jsx 불러오기
import './App.css'

function App() {
  return  <Post />	//Post함수 return
}

export default App;	//App.jsx 내보내기

- main.jsx

- React.StrictMode : 작성된 코드가 최적화 되어있는지 확인/ 버전 업데이트시 코드가 호환되지 않는 상황에 경고를 주는 역할

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'	//App.jsx불러오기
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />		//App출력하기
  </React.StrictMode>,
)

- 결과

 

12. 컴포넌트 재사용하기

- 여러 개의 컴포넌트를 사용할 때에는 항상 상위 태그로 감싸줘야 함

- App.jsx

import Post from './components/Post'
import './App.css'

function App() {
  return  <main>	//상위 컴포넌트로 감싸기
    <Post />
    <Post />
    <Post />		//여러번 호출
  </main>
}

export default App;

-결과

13. 컴포넌트에 속성 추가하기

- props사용

- Post.jsx

function Post(props) {
    return (
    <div>
        <p>{props.author}</p>
        <p>{props.body}</p>
    </div>
    );
}

export default Post;

- App.jsx

import Post from './components/Post'
import './App.css'

function App() {
  return  <main>
    <Post author="Maximilian" body="React.js is awesome!"/>
    <Post author="Manuel" body="Check out the full course!"/>
  </main>
}

export default App;

 

14. css 모듈로 css 스타일 적용하기

- Post.jsx

function Post(props){
    return (
    <div style={{color: 'red', textAlign: 'left'}}>
        <p>{props.author}</p>
        <p>{props.body}</p>
    </div>
    );
}

export default Post;

또는

import classes from './Post.module.css';	//css 스타일 추가

function Post(props) {
    return (
    <div className={classes.post}>
        <p className={classes.author}>{props.author}</p>
        <p className={classes.text}>{props.body}</p>
    </div>
    );
}

export default Post;

- App.jsx

import Post from './components/Post'
import './App.css'

function App() {
  return  <main>
    <Post author="Maximilian" body="React.js is awesome!"/>
    <Post author="Manuel" body="Check out the full course!"/>
  </main>
}

export default App;

- 결과

 

[2. 오늘 잘한 점]

리액트를 처음 해보는건 아니지만 오랜만에 해서 익숙하지도 않고 어려웠으나 최대한 이해해보려고 노력하고 실습도 했다. 또 코딩테스트도 다른 방법으로 풀어보고 싶은 마음에 이래저래 고민을 많이 했던 것 같다.

 

[3. 개선해야할 점]

문제 푸는 속도가 너무 느리다! 그리고 리액트 복습이 좀 필요할 것 같다. 또 얼굴이 너무 건조해서 핸드크림을 얼굴에 발랐더니 향이 지독해서 머리가 너무 아팠다 다시는 그러지 말아야겠다