React 전에 Vue 강의를 한 번 다른 곳에서 수강했었는데
그 덕인지 조금은 수월하게 입문 강의를 들을 수 있었던 것 같다.
정말 간단하게 핵심만 짚어준 강의였고, 다른 분들도 시작하기에 아주 좋은 강의라고 생각한다.
물론 이후에 계속 다른 심화 강의를 듣거나 공부해야 하는 것은 필수 과정!
배운 내용들을 정리해 본다.
npm init react-app my-app
: 프로젝트 생성
node_modules
: 모듈이 자동으로 설치가 되었다.
# 에러 발생
tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
> 해당 에러는 무시하고 넘어갔다
npm을 통해 설치하는 것들은 모두 node_modules로 들어간다
public
리액트로 개발한 모든 파일은 js로 만들어지게 되어 있다.
결국 index.html 파일 하나로 구동하는 것이기 때문에
public에는 index.html과 정책파일 favicon, logo, manifest > favicon 관련 설정 파일
src 폴더에 react 코드들을 개발해 나갈 것이다.
package.json은 이미 react 외에 node 기반의 프로젝트를 해본 사람들은 알겠지만
프로젝트에 대한 정보가 전반적으로 담겨 있다.
private: true > npm 사이트에 등록한다면, public으로 쓸 거냐 private으로 쓸 것이냐
dependencies는 실제 우리 react 앱을 운영환경에서 구동할 때 반드시 필요한 모듈들에 대한 정보가 나온다.
각각의 모듈들이 install 되어 쓰고 있는 모듈들도
만들어질 당시에는 다른 모듈들을 가져다가 쓴 것들이 있기 때문에
그 이외에 필요한 외부 모듈들 정보는 package-lock.json 파일에 담겨있을 것이다.
* script 는
명령어가 작성 되어 있다.
나중에 명령어를 추가할 수 있다.
npm start 같은 경우도 script에 start 라는 명령어가 작성되어 있기 때문에 그 명령어를 바탕으로 실행되는 것이다.
* eslintConfig
해당 강의에서 다루지는 않았으나 eslint 라는 것이 있고, 플러그인이나 모듈을 설치해서 사용하는 기능이다.
eslintConfig는 코드가 올바르게 작성되어 있는지 체크해주는 기능
* browserList
browserslist 어떤 브라우저를 지원할 것인지
- production 운영환경에서는
- development : chrome firefox safari 최신버전..
프로젝트가 정상적으로 실행이 되었다면
localhost로 접속이 가능하다.
* src 폴더
당장 모든 것을 알 필요는 없지만, 중요한 부분은 index.js
npm start 하는 순간 결국 제일 먼저 실행되는 것이 index.js파일이라고 이해할 것
elements 창을 보면 bundle.js라는 것이 존재하는데
결국 우리가 개발할 것들이 bundle.js로 script로 만들어져서 npm start할 때마다
bundle.js에 계속 들어가는 것이다.
jsx - javscript xml
: 자바스크립트를 확장해서 xml을 사용할 수 있는 것
실제 html이 아니라 jsx 파일로 html 태그를 js 안에서 사용할 수 있게 만든 거라고 쉽게 설명할 수 있다.
그것을 위해서 import React from 'react' 임포트함
import ReactDom
index.html을 보면 body 태그 안에 root라는 태그가 있는데,
document.getElementById('root');
그 root 를 id 가진 요소를 가져온다.
그런 애를 rendering 할 수 있는 root로 만들 겠다.
render라는 함수를 통해서 출력 가능하게 한다.
<React.StrictMode> : 엄격모드
reportWebVitals(); 라는 library가 있는데 웹퍼포먼스를 측정하기 위해서 추가되어 있다.
* react component 만들기
함수형 컴포넌트 / 클래스형 컴포넌트
import React from "react";
// 함수형 컴포넌트
function Home() {
return <h1>Home 화면입니다.</h1>;
}
export default Home;
import React, { Componenet } from "react";
//클래스형 컴포넌트
class Home extends Component {
render() {
return <h1>Home 화면입니다.</h1>;
}
}
export default Home;
=> 무엇을 사용해도 상관없지만, 최근에는 함수형 컴포넌트 방식으로 많이 개발하는 추세이다.
react에서 class 이름을 주고 싶을 때, className을 이용해야 한다.
class = "" 가 아니다
즉 html 태그 처럼 보이지만, jsx라는 태그이기 때문에 다른 명명규칙들이 있다.
React는 SPA(Single Page Application)이다.
메뉴를 클릭할 때마다, div 필요한 부분만 자바스크립트에서 바꾼다.
one page, client 단에서 처리하기 때문에 빠르다.
메뉴를 넣고, 메뉴를 클릭할 때마다 원하는 컴포넌트를 보여주도록 할 것이다.
=> Routing 처리
브라우저가 바뀔 때마다 보여줄 component를 맵핑하고 렌더링하는 그 과정을 라우팅이라고 한다.
추가적으로 모듈을 섪치해야 한다.
$ npm install react-router-dom@6설치
정상적으로 설치하고 나면 packager.json에 react-router-dom이 dependencies에 추가된 것을 확인할 수 있다.
* react-router-dom을 이용하기 위해서
index.js로 이동한다.
Browswer Router를 가져온다.
import { BrowserRouter } from 'react-router-dom';
* App.js에
import React from "react";
import { Routes, Route, Link } from "react-router-dom";
추가하고 Link 태그 to를 이용해서 연결한 링크를 작성한다.
Browser Path가 변경될 때마다 어떤 페이지를 보여줄 것인지!
<Routes><Route>를 이용한다.
예)
<nav>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
웹 개발을 한다고 생각하면 알아야 할 것
웹 화면상에 보여지는 특정 데이터를 컨트롤 하는 방법
사용자가 데이터를 input 했을 때 그 값을 가져오는 것
js에서 화면상에 데이터를 출력하는 부분..
Router를 통해서 메뉴 구성하는 법을 배웠음
동적으로 변경되는 값을 영어로 state(상태)라고 한다.
이 state를 관리하기 위해서 use state라는 함수를 제공한다.
즉 import로 { useState } 받아오기
import React, { useState } from "react";
const [num, setNum] = useState(0);
react에서 onClick은 C 대문자로 사용해야 함
동적으로 값이 변경될 때 state 상태 를 처리하기 위해서 useState라는 함수를 이용한다.
const [num, setNum] = useState(0);
setNum은 num 변수에 대한 setter 함수이다.
결국 사용자가 다양한 값을 input 하는데 react에서 어떻게 처리하는 지 알아보자
* input type text 만들고 onChange
// 멀티데이터 화면에 출력
서버에 데이터를 요청해서 고객목록 사용자 목록을 화면에 한 번에 뿌려주는 것
List.js
import React from "react";
const User = ({ userData }) => {
return (
<tr>
<td>{userData.name}</td>
<td>{userData.email}</td>
</tr>
)
}
const userList = () => {
const user = [
{ email: 'yoo@gmail.com', name: '유재석' },
{ email: 'haha@gmail.com', name: '하하' },
{ email: 'song@gmail.com', name: '송지효' },
{ email: 'kim@mail.com', name: '김종국' }
];
return (
<table>
<thead>
<tr>
<th>이름</th>
<th>이메일</th>
</tr>
</thead>
<tbody>
{user.map(user => <User userData={user} />)}
</tbody>
</table>
)
}
export default userList;여기서 헷갈렸던 부분은
{user.map(user => <User userData={user} />)}
어렵지 않다.
위에서 선언한 user를 map 형식으로 가져온다고 생각했을 때,
user 안의 요소들을 user 로 선언하고, <User /> 즉 위에서 선언한 User 메서드에 userData 변수 이름으로
user 배열 안에 있는 각각의 user 객체를 넘기는 것...!!
>> 여기까지는 React에 대한 입문 완료.
기타 코드
Home.js
import React from "react";
// 함수형 컴포넌트
const Home = () => {
return <h1>Home 화면입니다.</h1>;
}
export default Home;
// import React, { Componenet } from "react";
//클래스형 컴포넌트
// class Home extends Component {
// render() {
// return <h1>Home 화면입니다.</h1>;
// }
// }
// export default Home;About.js
import React from "react";
const About = () => {
return <h1>About 화면입니다.</h1>;
}
export default About;Counter.js
import React, { useState } from 'react';
const Counter = () => {
const [num, setNum] = useState(0);
// const num = 0;
// setNum 앞에 정의한 num이라는 변수에 대한 set함수
// setter와 같은 기능
const increase = () => {
setNum(num + 1);
// function setNum(num) {
// num = num + 1;
// }
}
const decrease = () => {
setNum(num - 1);
}
return (
<div>
<button onClick={increase}>+1</button>
<button onClick={decrease}>-1</button>
<p>{num}</p>
</div>
)
}
export default Counter;input.js
import React, { useState } from 'react';
const Input = () => {
const [txtValue, setTxtValue] = useState("");
const onChange = (e) => {
setTxtValue(e.target.value);
};
return (
<div>
<input type="text" value={txtValue} onChange={onChange} />
<br />
<p>{txtValue}</p>
</div>
)
}
export default Input;input2.js
import React, { useState } from 'react';
const Input2 = () => {
//여러 개의 데이터를 한 번에 받아서 처리하는 구조
const [inputs, setInputs] = useState({
name: "",
email: "",
tel: ""
});
const { name, email, tel } = inputs;
const onChange = (e) => {
const value = e.target.value;
const id = e.target.id;
// 리액트 상태관리 X
// inputs[id] = value;
// js object는 heap 메모리에 관리가 되기 때문에
// 참조 주소만 갖고 있다.
// 변경되었다는 것을 react가 인지할 수 있는 방법으로 해야 한다.
setInputs({
...inputs,
// 깊은 복사, 분해해서 새로운 object를 만든다.
[id]: value
// 기존에 값이 있던 것들은 최신의 것으로 update 된다.
})
}
return (
<div>
<div>
<label>이름</label>
<input id="name" type="text" value={inputs.name} onChange={onChange} />
</div>
<div>
<label>이메일</label>
<input id="email" type="email" value={inputs.email} onChange={onChange} />
</div>
<div>
<label>전화번호</label>
<input id="tel" type="tel" value={inputs.tel} onChange={onChange} />
</div>
<p>이름: {name} </p>
<p>이메일: {email} </p>
<p>전화번호: {tel} </p>
</div>
)
}
export default Input2;'온라인 강의' 카테고리의 다른 글
| React list 에서 key를 사용해야 하는 이유 (0) | 2023.05.26 |
|---|---|
| React Project 생성하기 npm init과 npx create-react-app 차이 (0) | 2023.05.26 |