React 익히고 활용하기❗

💥5주차 & 6주차 통합본!

 

0. React란? React의 장점과 단점?

▶ React란? → A JavaScript library for building user interfaces.

→ 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한, 즉, 화면을 만들기 위한 기능들을 모아놓은 자바스크립트 *라이브러리!

→ Meta(前 facebook)에서 만든 오픈소스 자바스크립트 UI 라이브러리. 현재 가장 많이 사용되는 라이브러리! 복잡한 사이트를 쉽고 빠르게 만들고 관리하기 위해 만들어짐!

(*라이브러리 : 자주 사용되는 기능들을 정리해 모아놓은 것)

★ 사용자 인터페이스(User Interface, UI) : 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로간의 입력과 출력을 제어해주는 것! (ex) 버튼, 텍스트 입력창

★ 프레임워크 VS 라이브러리? : 가장 큰 차이는, 프로그램의 흐름에 대한 제어 권한! 프레임워크는, 제어 권한을 개발자가 아닌 프레임워크가 가짐. 반면에 라이브러리는, 흐름에 대한 제어를 하지 않고, 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태! 즉, 라이브러리는 제어 권한이 개발자에게 있음!

★ 웹 개발의 흐름은 나중에 어떻게 될지 모르므로, React를 공부하면서, 동시에 그 밑바탕에 깔려 있는 웹사이트의 작동 원리와 흐름을 함께 이해하는 게 중요!

 

▶ SPA란? : Single Page Application의 약자. 하나의 페이지만 존재하는 웹사이트, 또는 웹애플리케이션.

수백개의 페이지를 각각 html로 만드는 것은 비효율적! 그래서 1개의 html 틀을 만들어놓고, 사용자가 특정 페이지를 요청할 때, 그 안에 해당 페이지의 내용을 채워서 보내주는 것! React는 SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구!

 

 

1. create-react-app으로 React 프로젝트 만들기

① Windows Powershell을 열어준 뒤, npx create-react-app voca(=프로젝트 폴더)

② 예전에 react 프로젝트를 조금 해본 적이 있어서 그런지, 최신 버전이 아니라고 뭐시기뭐시기 군더더기가 뜨고 프로젝트가 안 만들어짐. 그래서 하라는 대로 함. npm uninstall –g create-react-app

③ 위의 명령을 실행시켜준 뒤, 다시 npx create-react-app voca를 하니까 프로젝트가 만들어짐!

④ 터미널을 열어서, 프로젝트 폴더 안으로 들어간 뒤, npm start를 치면 끝!

 

★ create-react-app 의 역할

☆ 자동으로 git을 초기화 상태로 설정해준다. 그래서 git init을 따로 해줄 필요가 없음!

☆ src/App.js 파일에서 수정한 내용들을 바로바로 반영시켜준다!

 

★ node-modules 폴더

☆ 이 프로젝트를 실행할 때 사용되는 dependency 모듈들이 모두 모여있음! 여기에 설치된 내용들은, package.json에 기록되어 있음! node-modules 폴더를 지우면 프로젝트 실행 불가! 근데 npm install 해주면 됨!(다만 package.json이 수정되지 않았다면!)

☆ git에 올릴 때 안 올라감. 크기도 크고 파일도 많아서! 근데 package.json 파일을 git에 올려두면, 다른 개발자가 동일한 환경을 구축할 수 있음!

 

★ public 폴더

☆ 이 폴더 안의 <div id=“root”></div>로 react 코드가 실행되어서 만들어진 DOM이 구현됨!

 

★ src 폴더

☆ 대부분의 작업이 실행되는 곳!

▶ 이 폴더의 App.js에서 코드를 구현! 이 파일에서 무언가를 작성하거나, 수정한 후 저장하면, 브라우저에 바로 반영됨!! → Hot Module Replacement (HMR)

▶ JSX : 자바스크립트 내부에 HTML처럼 작성하는 것!

 

 

2. React의 컴포넌트, JSX

① 컴포넌트

★ React로 만든 페이지는 컴포넌트들로 구성되어있음! 페이지 단위로 HTML을 작성하는 게 아니라, 각 부분들을 컴포넌트로 만들어서 조립!!

→ 비슷한 부분은 코드 재사용! → 유지보수도 한결 쉬워짐!

★ 한번 만들어둔 컴포넌트는, 어디에든 몇 번이고 재사용 가능!

★ App.js는 App 컴포넌트! 함수로 만들어져있음. default로 export 되어지고 있음. 이걸 index.js에서 import해서 사용!

★ 함수로 만들어진 컴포넌트 : 함수형 컴포넌트! 모든 컴포넌트는 대문자로 시작해야함!

★ src 폴더 안에 component 폴더를 만든 후, 그 안에 js파일도 만들고, 함수도 만든 후 export 해주면 간단하게 컴포넌트 생성 가능!

▶ 컴포넌트 만드는 방식

1) const Hello = () => {

return (

<div>

<h1>Hello</h1>

<World />

</div>

);

}

export default Hello;

 

2) const Hello = function () {

return <p>Hello</p>;

};

export default Hello;

 

3) export default function Hello() {

return <p>Hello</p>;

}

② JSX

★ 컴포넌트가 return하는 것은, JSX (JavaScript XML). HTML을 다뤄봤다면 쉽게 적응 가능!

※ class는 Javascript의 예약어이므로, JSX 작성시, className을 써야함!

※ style은 객체로 전달해야 적용됨. style에서 color는 문자열로, 배경색은 backgroundColor처럼 CamelCase로!

※ { } 내부에서 변수 사용 가능! (ex) Hello, {name}

숫자나 문자열은 가능하나, boolean이나 객체는 표현 불가!

★ 한 컴포넌트 안에는, 하나의 JSX 태그만 쓸 수 있음! (그래서 전체 태그들을 빈 태그 <></>로 묶거나, <div></div>로 묶는다!

 

 

3. React에서의 CSS 작성법

★ create-react-app으로 만들어진 프로젝트라면, 별도의 다른 패키지 설치 없이, 바로 CSS 사용 가능

① inline style 사용

CSS 파일을 별도로 만들지 않고, 바로 html 태그에 적어주는 것. 객체를 작성해야! 이름은 CamelCase로 적어준다. 사실 특별한 이유가 없으면, inline style로 작성하진 않음.

(ex) <div>

<h1 style = {{

color : ‘#f00’,

borderRight : ‘2px solid #000’,

opacity : 0.5,

marginBottom : “30px”,

}}>Hello</h1>

 

② CSS 모듈 사용

▶ index.css : 전체 프로젝트에 영향 미침

▶ App.css : App 컴포넌트에 한정!

※ App 컴포넌트에 있고 App.css로 꾸며준 box와, Hello 컴포넌트에 있고 Hello.css로 꾸며준 box가 생김새가 서로 똑같아짐..! 왜냐하면, 이 CSS 파일들이 각 컴포넌트에 종속되는 게 아니라, head 안에 전부 다 작성되기 때문에, 전체 페이지에 영향을 미치기 때문!

※ 컴포넌트에 특화된 CSS 작성법 : CSS 모듈 사용하기!

→ (컴포넌트 이름).module.css 파일을 만들어준 뒤, 그 안에 CSS를 작성하고, 컴포넌트 파일 위에 import styles from “./(컴포넌트 이름).module.css”; 작성 후, 컴포넌트 안에 <div className={styles.(css 클래스 이름)}></div> 작성

→ CSS 크기가 엄청 커지면, 네이밍, 상속, 오버라이딩이 가장 고민이 되는데, 이 방식으로 다 해결 가능!

♡ global 단위가 아니라, 컴포넌트 단위로 관리되는 것도 장점!

 

③ index.css 파일에 전부 작성

 

 

4. React에서의 이벤트 처리(Handling Events)

① 미리 함수를 만들어 놓고, 전달하기

② 안에다가 직접 함수 작성하기

▶ 2번째 방법의 장점 : 매개변수를 전달하기가 편하다!

const Hello = () => {

 

function showName() {

console.log('Mike');

}

 

return (

<div>

<h1>Hello</h1>

<button onClick={showName}>Show Name</button> /* 1번째 방법 */

<button onClick={()=>{

console.log(20);

}}>Show Age</button> /* 2번째 방법 */

</div>

);

}

 

 

 

5. React에서의 state와 useState

▶ state : 컴포넌트가 관리하는 상태값. 이 값이 변하면, React는 자동으로 UI를 업데이트 시킨다! 그래서 개발자는 이 state만 잘 관리하면, 화면을 다시 그려주는 작업은 신경 안써도 되는 편리함이 있음!

▶ useState : state를 만들 수 있는 React의 Hook. 상태값(state) 관리를 위해서 사용. (ex) import {useState} from “react”; //바깥에 작성

const [name, setName] = useState(‘Mike’); //export default function 안에 작성. 배열 구조 분해를 사용함. setName 함수가 호출되어서 name이 바뀌면, react는 이 컴포넌트를 다시 렌더링함. useState()의 괄호 안에는 초기값이 들어감.

★ useState는 배열로 반환! 배열의 첫 번째 값은 state, 즉 변수명이고, 두 번째는 state를 변경해주는 함수!

★ 동일한 컴포넌트가 여러 개 있어도, state는 각각 관리됨! 다른 state에 영향을 미치지 X

 

※ 16.8 버전부터, 모든 컴포넌트를 함수형으로 만들 수 있게 되었고, React Hook은 함수형 컴포넌트에서도 state와 life cycle 관리가 가능해짐.

 

 

6. React에서의 Props

▶ props : properties의 줄임말. 컴포넌트의 속성값. (App.js에서 컴포넌트 태그 안에 속성값을 주면, 그걸 컴포넌트 파일 안에서 넘겨받을 수 있음!) 이 값은 컴포넌트 내부에서 변경할 수 없음!! 넘겨받은 그대로 사용해야함! 만약 변경하고 싶다면, 컴포넌트 내부에서 state를 다시 만들어야 함!

※ state와 props는 굉장히 많이 사용된다! 화면에 어떤 데이터를 갱신하기 위해서는 항상 이 2가지를 사용해서 처리하는 게 좋음!

※ 한 컴포넌트가 가지고 있는 state를 props로 넘길 수도 있음!

 

★ 개발자가 해야할 일 : 데이터만 적절히 바꿔주기! 그러면 컴포넌트는 알아서 렌더링을 다시 하고, 화면의 UI 정보도 갱신됨! 일일이 어떤 요소를 어떤 값으로 바꿔줘야할지 찾아다니지 않아도 X

 

 

7. React에서의 더미 데이터 구현, map() 반복문

★ json 파일 안의 더미 데이터들을 화면상에 구현할 때, 반복문을 사용해야 하는데, 이때는 map()을 사용하는 게 편함!

★ map()은 배열을 받아서, 또 다른 배열로 반환! 이때 반환되는 배열 요소는 JSX로 작성!

★ key는 반복되는 요소에 고유한 값을 넣어줘야 함!

※ React는 상태가 바뀌면, 이전 상태의 트리와, 이후 상태의 트리를 비교함. 이때 키가 같다면, 동일한 요소로 판단하고 업데이트 해줌.

※ 배열의 순서나 내용이 변경되지 않는다면, 아무 key나 사용해도 된다. (다르기만 하다면!)

but 순서나 내용이 변화되는 상황이라면, 요소를 특정할 수 있는 key를 사용한다! (그렇지 않으면 효율성이 안 좋음)

 

 

8. React-router-dom

★ 프로젝트 폴더 안에서, npm install react-router-dom으로 라우터 설치!

★ <Route path=“/”> : 첫페이지를 의미!

※ exact path=“/” : 정확히 딱 첫페이지!

★ 한 페이지에서 다른 페이지로 넘어갈 때, HTML은 <a href> 태그를 사용하지만, react-router-dom은 <Link to>를 사용!

★ URL을 포함한 값을 얻을 때는, react-router-dom이 제공하는 useParams() 라는 Hook을 사용!

 

 

9. React의 json-server, REST API

★ 사용자의 action에 따라서 데이터를 읽고, 쓰고, 업데이트하고, 삭제할려면, db를 구축하고 API를 만들어야 함! 그래서 json-server를 이용해서 Restful API를 만들어보자!

▶ json-server는 빠르고 쉽게 Rest API를 만들어줌 (공부 목적, 프로토타입, 작은 개인프로젝트에 쓸 수 있음!) 프로젝트 폴더에서 npm install –g json-server 명령으로 설치! 설치 후, json-server --watch ./src/db/data.json —port 3001로 경로 정해주기!

▶ Rest API란? : 쉽게 말해서, URL 주소와, 메서드로 *CRUD를 요청!

(*CRUD : Create(POST), Read(GET), Update(PUT), Delete(DELETE))

★ Rest API는, URL과 메서드만 보고도 어떤 요청인지 유추 가능한 장점이 있음!!

 

 

10. React의 useEffect(), fetch()로 API 호출하기

▶ useEffect()란? : useState와 마찬가지로, 어떤 상태값이 바뀌었을 때, 동작하는 함수를 작성 가능!

★ useEffect()는 첫 번째 매개변수로 함수를 가짐. 이 함수가 호출되는 타이밍은, 렌더링 결과가 실제 DOM에 반영된 직후! 화면이 다 그려지고 나서, 그리고 컴포넌트가 사라지기 직전에 마지막에 호출됨! 즉, 상태값이 변경되어서 다시 렌더링된 다음에 호출됨!

※ 렌더링을 끝내고 어떤 작업을 하고 싶다면, 예를 들면 API 호출 같은 경우, useEffect()의 첫 번째 매개변수로 함수를 전달하면 됨! 그런데 그렇게만 하면, 상태값이 매번 변경될 때마다 불필요하게 함수가 호출될 수 있다! 즉, 원하지 않는 상황에서도 함수가 호출될 수 있음!

→ 이럴 경우에, useEffect()의 두 번째 매개변수로, *배열을 전달한다! 이건 무슨 뜻이냐면, 배열 안의 것이 변경될때만 이 함수를 실행하라는 뜻! (*이 배열을 의존성 배열이라고 한다.) 즉, 의존성 배열의 값이 변경되는 경우에만 이 함수를 실행하라는 뜻!

★ useEffect()를 사용하는 이유 : API 호출! 즉, 렌더링이 된 후에 API를 호출하는 목적! 그러면 렌더링이 다 완료되고 최초로 한번만 API를 호출하면 됨! 그럴 땐, 의존성 배열을 [] 이렇게 비워놓으면 된다!

★ 즉, 상태값과 무관하게 렌더링 직후 딱 한번만 실행되는 작업은, [] 빈 배열을 전달하면 된다!

 

▶ API 호출하기 : API의 비동기 통신을 위해서, useEffect()의 안에 fetch()를 이용!

(ex) useEffect(() => {

fetch('http://localhost:3001/days') (API의 경로를 적어줌. 이렇게 하면 Promise가 반환됨.)

.then(res => {

return res.json() (그러면, then을 이용! 여기서 res는 http의 응답이고, 실제 json은 아님. 그래서 json() 메서드를 사용하여 res.json()으로 쓴다. 그러면 json으로 변환되고, Promise가 반환된다!)

})

}, []);