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