npm과 npx
npm
- node.js로 만들어진 패키지(모듈)을 관리해주는 툴
npx
- node package execute
- node실행을 위한 명령어
- npm과 달리 최신 버전의 패키지를 임시로 설치해서 실행하는 용도
- 한 번만 임시로 설치해서 해당 노드를 실행시키고 사라진다
- 따라서 npm에 대한 의존성이 없어서 다른 node.js버전으로 이동도 가능하고 좀 더 자유로운 코드 공유가 가능하다
JSX
- JS에 XML을 추가한 문법
- 보통 리액트에서만 사용
- html 문서 구조를 js에서도 사용가능, 따라서 js 내부에서도 html을 짜듯 코드 구성이 가능
- babel이라는 컴파일러(번역기)가 필요하다
- 기존 html, JS의 불편한 점을 해결하고자 나온 것이 바로 jsx
- 일반 js문법 안에 html을 쓸 수 있게 하여 좀 더 직관적이고 편리하게 코딩이 가능
- html 요소는 return의 ()안에, js는 {}안에 쓰면된다
JSX 문법
- class => className
- onclick => onClick
Component
- 리액트의 핵심
- 기존 웹 서비스들은 웹페이지에서 정말 작은 부분이 업데이트 되어도 페이지 전체 리로딩이 필요
- 하지만 리액트는 컴포넌트 단위로 페이지 새로고침이 가능해 리소스 절약이 가능하고 부드러우면서 빠르다
- 독립적으로 컴포넌트를 구성해 재사용이 편리하다
- 데이터는 속성(props)로 받고 상태(state)에 따라 view를 변화한다
- 즉, 쇼핑몰에서 상품목록 페이지를 하나하나 다 그릴필요없이 하나의 컴포넌트만 만들고 변화되는 데이터만 props로 전달해 재사용한다
컴포넌트는 PascalCase로 이름써야한다
Component 종류
- class형
- 함수형
1. class형
- 예전에 최초로 사용되었던 컴포넌트
- 메모리 자원을 더 먹고 느리다
- render라는 함수를 사용해야만 그릴 수 있다
- 상대적으로 가볍고 사용이 쉬운 함수형 컴포넌트에게 밀림
2. 함수형
- 구조 자체가 클래스에 비해 단순
- 메모리 덜 먹고 빠르다
- hooks기능의 도입으로 리액트의 기능 사용도 좋다
Props
- 데이터를 컴포넌트에 전달할 때 사용
배열순회
- map으로 순회
const List = () => {
const arr = [
{
title: "리액트 공부하기",
content : "state 사용법 익히기"
},
{
title: "코테 문제 풀기",
content : "Lv 0 정복 가즈아"
},
{
title: "코테 문제 풀기",
content : "Lv 1 정복 가즈아"
}
]
return (
<div>
<Modal/>
{
arr.map((el)=> <ListChild title={el.title} content ={el.content}/>
)
}
<Modal/>
</div>
);
};
- map으로 배열 데이터를 그릴때는 해당 요소에 unique한 key값 props로 부여해야한다
- 나중에 리액트에서 map으로 그려진 엘리먼트 중 어떤 특정한 것을 컨트롤할지 구분할 수 있기 때문
- 따라서 같은 부모를 가진 형제들끼리는 unique한 key값을 가져야한다
arr.map((el, index)=> <ListChild title={el.title} content ={el.content} key={index}/>- key에 index를 넣는 것은 최후의 수단!
- 만약 백앤드 작업도 하게 된다면 pk가 있어서 pk를 넣어주면 된다
안전하게 props 사용하기
- props로는 배열같은 다양한 자료형을 전달할 수 있다
- 만약 props로 배열 or 객체 데이터가 안들어오면 map이 없어 오류가 뜬다
{props.arr?.map((el) => { return <div key={el}>{el}</div> })}
- arr에 값이 있으면 뒤에 것을 실행하는 구조
- 하지만 에러를 막겠다고 물음표를 남발하는 것은 좋지 않다!
🔥 jsx에서(return 내부)는 for문이나 if문 같은 좀 heavy한 구문은 사용하지 못한다
따러서 map이나 삼항연산자를 사용한다 🔥
State
-
컴포넌트에 대한 상태
-
사용이유 : state가 변경되면 해당 컴포넌트가 바로 다시 렌더링 되기 때문에 유동성 관리가 쉽다
-
상태 변경 함수는 꼭 함수 정의를 하고 사용한다
<button onClick={SetStudent('hatbann')}>영어로!</button>
//이런식으로 사용 xxxx- return 내부에서 함수 정의를 하지 않고 바로 상태 변경함수(set~~~)를 호출하면 클릭 안되어도 실행이 되기 때문에 무한 루프에 빠지게 된다
state가 변경되면 당연히 return 내부에 있는 요소를 다시 렌더링 해야하니 return을 호출 -> 다시 상태 변경함수호출 -> return 호출의 무한루프
state 사용시 주의사항
- 객체 또는 배열을 state로 사용할 때 주의
- 배열은 객체 타입이라 변수에 주소 값이 저장되어 있다
- 따라서 배열의 특정 인덱스 값을 변경해도 주소 값이 변경된 것은 아니라 set을 호출해도 상태가 변했다고 생각 x
<button onClick={() => setArr([1])}>+</button>
이렇게 아예 새로운 배열을 넣어야한다
혹은
<button onClick={() => {
arr[0] = arr[0] + 1;
const copyArr = [...arr];
setArr(copyArr);
}}
>- 객체도 마찬가지
결론
- 자주 값이 변경되고 바로바로 보여줘야하면 state로 선언하자
- 배열 또는 객체로 쓰기보다는 하나의 원시값으로 쓰는게 좋다
- 배열 or 객체로 쓰려면 js객체 타입 특성에 유의해서 사용하자
JS spread 문법
const arr = [1, 2, 3, 4, 5];
const copyArr = arr;
copyArr[0] = 2;
console.log(copyArr); //[ 2, 2, 3, 4, 5 ]
console.log(arr);//[ 2, 2, 3, 4, 5 ]- 배열이 담겨있는 변수엔 주소값이 들어있어서 이런 상황이 발생한다
const copyArr = [...arr];
copyArr[0] = 2;
console.log(copyArr); //[ 2, 2, 3, 4, 5 ]
console.log(arr); // [ 1, 2, 3, 4, 5 ]- 이렇게 스프레드 문법을 사용해 배열을 만들면 원본은 변경되지 않는것을 확인할 수 있다
- 객체의 경우도 마찬가지
const obj = {
pororo: '뽀로로',
lupy: '루피',
crong: '크롱',
};
const copyObj = { ...obj };
copyObj.crong = '크롱2';
console.log(obj); //{ pororo: '뽀로로', lupy: '루피', crong: '크롱' }
console.log(copyObj); //{ pororo: '뽀로로', lupy: '루피', crong: '크롱2' }
console.log(obj === copyObj); //false
const copyObj = { ...obj, lupy: 'lupy' }; //이렇게 하면 특정값만 변경가능함수 선언시 스프레드 문법 사용
function foo(a,b, ...rest){
}- 함수 선언 시 몇개를 제외하고 나머지 매개변수를 한꺼번에 스프레드 문법으로 받을 수 있다
- 이렇게 받으면 나머지 매개변수를 객체 형태로 받게 된다
구조분해 할당문법
const obj = {
str: "test",
num : 10
}
const {str} = obj;
console.log(str); //"test"
MERN Stack
- MongoDB
- ExpressJS
- ReactJS
- NodeJS
- 를 사용해서 웹 개발을 하는 것
Formatting
- prettier설치
- .prettierrc파일 생성해서 안에 내용넣기
Linting
- 규약과 규율을 검사해주는 방법
- eslint설치
npm intall --save-dev eslint- airbnb의 룰
npm install --save-dev eslint-config-airbnb-base eslint-plugin import Typescript 세팅
- eslint가 못잡는 오류 잡기
- 상단에 //@ts-check 추가하기
후기
지난 3주간은 팀프로젝트를 하느라 오랜만에 이론수업 및 실습을 진행했다. 리액트는 졸업프로젝트때도 사용했고 자습을 해본 경험이 있는데 앞서 새싹에서 ejs나 순수 html,js로 작업할 때 답답했던 점이 확실히 리액트를 활용하니 편하다고 생각했다. 특히 코드가 확 줄어든다!!
