📑 React JS - 초보자를 위한 리액트 강좌 (실습 - 단어장 만들기)
youtube 영상 정리글.
CRA로 만들어진 React 프로젝트 파일 설명
-
node_modules
프로젝트 실행시 사용되는 dependency 모듈들이 모여있다. 설치된 내용들은 pakage.json 에서 dependencies에 쓰여있다.
//git에 프로젝트 올릴 때 node_modules는 올리지 않는다.(올리기엔 용량이 크고 올리지 않아도 pakage.json을 보면 (개발자가 환경 구축을 할 수 있어서)알 수 있는 부분이라) -
public
index.html root로 div가 실행되어 DOM이 만들어져서 실행된다. -
src
index.js에 root에 렌더링 시켜준다는 코드가 있다. app.js에 코드를 작성하고 수정하면 브라우저에 바로 반영된다. (HMR-hot module replacement)
//package.json에서 scripts를 보면 start, build, test, eject를 볼 수 있다.
React
-
컴포넌트로 나누어 프로젝트를 수행한다. 새로운 컴포넌트들을 만들어 app.js에서 사용한다.
-
style은 객체로 전달해야 적용되며 style 값은 문자열로 작성한다.
-
변수를 만들어 사용해야 할 시 {}안에 변수를 넣어 사용해야 한다.
-
import할 컴포넌트를 태그처럼 사용하면 된다.
-
JSX는 하나의 태그만 만들 수 있다. 따라서 아래와 같이 코드를 작성하면 에러가 발생한다.
export default function Hello(){
return (
<h1>Hello<h1>
<World/>
}
}
//2개의 태그가 반환되므로 하나의 태그(ex. div, 빈 태그 등)로 감싸주어야 함create-react-app
css 적용
-
인라인 : 태그에 바로 작성하기 (객체로 작성해야 한다/style은 객체로 전달해야 적용된다. 값은 문자열로 작성(숫자는 그냥 기입해도 됨), 카멜 표기법으로 키 값 작성(속성))
(특별한 일 아니면 거의 인라인으로 작성 안함) -
css 파일 사용 :
index.css 모든 파일에 적용되는 css
app.css는 app.js에만 적용되는 것이 아니다. (문제점 global로 적용됨) css파일들이 각 컴포넌트에 종속되는 것이 아니라 head부분에 들어가는 것이므로 전체 페이지에 영향을 미친다. -
각 컴포넌트에 적용되는 css파일 :
컴포넌트명.module.css로 작성하기
이벤트 적용
-
이벤트 함수를 만든 뒤 태그에 적용
<button onClick={showName}></button> -
태그에 직접 function 작성
<button onClick=()=>{...}></button>
이 방법은 매개변수를 전달하기 편하다 (onChange는 값이 변하면 발생하는 이벤트~)
state와 props
state 개념
컴포넌트가 관리하는 상태값
useState(React hook) useState는 import해야함 // 배열 구조 분해
동일한 컴포넌트를 여러 번 사용하더라도 state는 각각 관리된다. 다른 컴포넌트에 영향을 미치지 않는다!
props 개념
props는 컴포넌트 내부에서 넘겨받은 값을 변경할 수 없다. (read only)
만약 변경하고 싶다면 컴포넌트 내부에서 state를 다시 만들어야 한다. // 이렇게 되면 넘겨받은 값을 변경하는거지 원래 값을 변경하는 것이 아니다.
❗ state와 props는 많이 사용된다.
화면에 어떤 데이터를 갱신하기 위해서는 같이 사용해야 한다.
react는 이렇게 동작한다. 개발자가 해줄것은 데이터만 적절히 바꿔준다면 알아서 갱신된다. 일일이 어떤 요소를 바꿔야 하는지 찾아다니지 않아도 된다.
반복문 map
반복문 map(배열을 받아서 또다른 배열을 반환해주는 함수)
? key가 중요한 이유, index가 아니라 key가 중요한 이유
- React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도와준다. key가 있으면 react는 배열 전체를 리렌더링 하지 않고, 배열에 추가된 요소 한가지만 다시 리렌더링 한다. 변경이 없는 데이터까지 DOM을 조작해서 불필요한 자원을 낭비하지 않겠다는 것이다.
- key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.
새 페이지 이동 (routing 라우팅)
npm install react-router-dom
app.js에 import{BrouserRouter, Route, Switch} from "react-router-dom";
<BrouserRouter>
<Switch>
<Route exact path"/">
컴포넌트~
</Route>
<Route path"/day">
//다이나믹한 url을 처리할 때는 :을 붙여주면 된다
//import {useParams} from "react-route-dom"
컴포넌트~
</Route>
</Switch>
</BrouseRouter>link 연결
html은 a를 사용하지만 react router는 link를 사용한다.
import {Link} from "react-router-dom"
<Link to="/day"></Link>간단하게 json server 사용 (rest api 사용)
//토이 프로젝트, 작은 동작 등에 용이
json server 설치
npm install -g json server
json-server --watch 경로(./src/db/data.json --port 3001
이렇게 사용하면 서버를 사용하는 것이므로 데이터가 유지된다.
CRUD
Create, Read, Update, Delete (생성, 읽기, 갱신, 삭제)
- 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다.
react hook이란,
Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.
useEffect() (react hook)
: 렌더링을 끝내고 작업을 하고 싶다면 사용한다.(ex. api 호출) 첫번째 변수로 전달한다.
// 원하지 않은 상황에서도 작동할 수 있다는 문제점
// 두번째 매개변수로 배열을 두고 주면 의존성 배열이 변경되는 경우에만 실행되도록 수정가능
// 빈 배열 입력 (한번만 실행됨)
//fetch() api 비동기 통신을 위해 사용한다.
useRef() (react hook)
useHistory() (react router에서 지원하는 기능)
✅ custom hook 만들기
기존에 존재하는 hook말고도 직접 만들어서 hook을 사용할 수 있다. 여러 번 반복되는 동작(코드)를 hook으로 만들어 사용한다.
예제)
https://www.youtube.com/watch?v=B70lI2PvRnA&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=13
✅ hook에 대한 추가 설명 참고
https://velog.io/@goyou123/React-Hooks-%EC%B4%9D%EC%A0%95%EB%A6%AC
