리액트 단점은 seo가 약하다
이유는 index.html 파일 하나만 딸랑 있는데
그 안에 뭐가 없다 왜냐? js로 만들기 때문에
따라서 검색에 취약하다
-이걸 보안하기 위해 next.js가 있다
얕은 복사
const obj1 = {
test: 1,
};
const obj2 = obj1;
obj2.test += 1;
console.log("obj1: ", obj1);
console.log("obj2: ", obj2);
// obj1: { test: 2 }
// obj2: { test: 2 }주소값을 복사하기 때문에!!
주소를 복사한다!!
같은 메모리의 공간을 바라본다!
이게 얕은 복사다
그럼 이걸 방지해야한다
const obj1 = {
test: 1,
};
const obj2 = obj1;
const obj3 = JSON.parse(JSON.stringify(obj1));
obj2.test += 1;
console.log("obj1: ", obj1);
console.log("obj2: ", obj2);
console.log("obj3: ", obj3);
// obj1: { test: 2 }
// obj2: { test: 2 }
// obj3: { test: 1 }구조분해 할당
객체는 키값이 맞아야한다
배열은 위치(인덱스)값이 맞아야한다
const arr = [1, 2, 3];
const [one1, two2] = arr;
const [one, two] = [1, 2];
console.log(one);
console.log(two);
console.log(one1);
console.log(two2);
// 1
// 2
// 1
// 2전개 연산자
spread operator
화셜표 함수
한줄을때는 중괄호 생략해도 리턴 가능
yarn create react-app 'name'
src 아래 있는 파일들을 모두 절대 경로로 만들어 주는
- jsconfig.json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}// App.js 파일
import "./App.css";
// import "App.css"; <- 절대 경로 없어도됨
props
부모가 자식한테 주는
props는 반드시 위에서 아래 반향으로 흐른다 즉 부모가 자식에게
props는 반드시 "읽기" 전용으로 취급하며 변경하지 않는다
- props dilling 현상
children
import React from "react";
const App = () => {
return (
<>
<User>유저 태그 사이의 값</User>
</>
);
};
const User = (props) => {
console.log(props);
return <div>{props.children}</div>;
};
export default App;
User.defaultProps = {
name: '기본값'
}부모 태그가 자식 컴포넌트를 불러올 때 태그 사이에 값을 넣으면 props을 넘겨줄 수 있음
기본값 프롭도 확인하자
컴포넌트 파일은 .js 보다 .jsx로 사용하는게 더 명시적이다
다른건없다 그냥 컴포넌트 파일이다 라고 알려주는 의미
state
ui를 바꾸기 위해서 사용한다
원시값과
원시값이 아닌값
원시값은 불변성이 있다
let num1 = 1
let num2 = 1
위 두 값은 === 완전 일치한다
왜나면 같은 주소값을 가르키고 있기 때문에
메모리 안에 1을 두개 만드는게 아니다 1개만 만든다 그리고 같은 주소를 두 변수가 본다
이때 num1 = 2 라고 값을 변경하면 메모리에서 2를 새로 만들고 num1 변수는 다른 주소를 본다.
num1과 num2 는 각각 다른 메모리 저장 공간을 참조하고 있기 때문에
위 경우를 불변성이 있다라고 한다
객체는?
객체는 불변성이 없다
이게 무슨 말이냐 주소값이 안바뀐다는 말이여
즉, 객체는 안에 값이 수정되어도 추가되어도 같은 메모리 저장 공간을 바라본다 즉 참조한다 이말이여 그렇기 때문에 불변성이 없다라는 말이여
정리하자면 원시 데이터는 수정했을 때 저장된 값 자체는 메모리에 저장된 값 자체를 바꿀 수 없어
그니까 다른 메모리 공간에 값을 만들고 그 값을 참조하도록 하는거지
state가 변경되면 렌더링 된다
리액트에서는 렌더링을 할지 말지의 조건이 state의 변경 유무다
즉 리렌더링한다
?? 불변성이랑 리액트 렌더링이랑 뭔상관이여?
ㅇㅇ 상관있지
state가 변하면 렌더링을 다시하는데 객체는 불변성이 없기 때문에 state가 변하지 않으니까
그럼 객체나 배열을 state로 사용하는데 렌더링을 다시 하고 싶으면 어떡해?
새로운 객체나 배열을 만들어서 새로운 주소를 참조하게 하면 되지!
근데!
let newArr = arr;
이딴식으로 복사하면 주소값을 같이 써서 의미 없으니까
let newArr = [...arr] 이런식으로 값만 가져와서 다른 주소를 참조하도록 하면 돼!
스프레드 문법을 사용하는거지 개꿀!
리액트 컴포넌트는 선언체다!
리액트의 컴포넌트기반의 개발 이전에는 브라우저에서 동적으로 변하는 ui를 표헌하기 위해 직접 DOM 객체를 조작하는 명령형! 프로그래밍 방식으로 구현했다
명령형은 어떻게를 중요시여겨서 프로그램의 제어의 흐름과 같은 방법을 제시하고 목표를 명시하지 않는 형태입니다.
선언형은 무엇을 중요시 여겨서 제어의 흐름보다는 원하는 목적을 중요시 여기는 형태이다
