✍️코알누 React 정리

▪️ React의 장점

1. 자동으로 업데이트(새로고침 안해도 됨)

2. 코드 재활용을 많이 함(컴포넌트를 여러개 만들어서 가져다가 쓴다. 코딩을 최대한 덜 하면서 웹사이트를 만듦)

3. JSX문법
🔹HTML+JavaScript
🔹html 컴포넌트와 그와 관련된 함수를 뭉쳐서 세트로 만든다. 그리고 이 세트를 컴포넌트 라고 한다.

🔹App.js가 웹에 보여질 내용이다.
🔹리액트는 html파일이 딱 한가지밖에 없다.
🔹하나의 웹페이지 내용만 바꿔주는 것이다.(유저의 눈에는 웹페이지가 여러개인 것처럼 보임)
🔹main.js는 index.html 파일과 App.js를 연결해주는 연결고리 역할✨✨✨

import React, {useState} from 'react';
import './App.css'

function App() {
 let count = 0;
 const[count2, setCount2] = useState(0)	// count2: 초기값을 담고 있는 state 변수
									  // setCount2: state의 값을 업데이트 해줌
									 // useState(0): 0부터 시작 

 const increase = () => {
  const = count + 1;
  setCount2(count2 + 1)	// 값을 증가시키는 함수
  console.log("count work?",count,"state count2",count2)
}
 return ( 
  <main>
   <div>{count}</div>
   <div>state:{count}</div>
   <button onClick={increase}>증가</button>
  </main>
 );
}
export default App;

✍️
개발자도구 콘솔창에 찍어보면 count는 계속 1이고 count2는 한박자 느림..

Q1. 왜??????

state는 비동기적이다! 그래서 setCount2 이후에 값이 변한다.
이 말은 함수가 끝나야 값이 변한다는 뜻이다.

✍️✍️

Q2. count 값은 왜 안변함?

🔹state가 업데이트 될 때마다 컴포넌트(함수)가 다시 실행된다.
🔹함수가 끝나면 count 변수가 0으로 계속 초기화 된다.
🔹변수(let count=0)는 기존의 값이 저장이 안된다.
🔹state값이 업데이트가 되면 변수의 값은 다시 초기화가 된다!

---

✔️1. object shorthand assignment

(키와 키값에 들어가는 변수의 이름이 같을때만 사용)

let name = "noona"
let age = 17

let person = {
	name,
    age
}
console.log(person)
//{name: 'noona',age: 17}

❗이런 경우에는 줄여서 쓸 수 없음

let name2 = "noona"
let age = 17

let person = {
	name:name2,
    age
 }

console.log(person)
//name과 name2는 변수 이름이 다르니까 놉!

✔️2. Destructuring(객체를 분해해서 가져옴)

let person = {
	name: "noona",
    age: 20
}

let name = person.name
let age = person["age"]
console.log(name,age) //일반적인 방법의 예시

let person = {
	name: "noona",
    age: 20
}

let name = person.name
let age = person["age"]
let {name,age} = person // 중괄호 사용!
console.log(name,age)
//'noona',20 출력

✨가장 많이 사용되는 문법✨

let array = [1, 2, 3, 4]
let [a, b] = array

console.log(a, b)

✔️3. spread

let person = {name:"noona",age:12}

let person2 = {...person} //객체를 복사함
console.log(person2)
//{name:"noona",age:12}

let person = {name:"noona",age:12}

ler person2 = {...person}
let person3 = person
console.log(person2)	//{name:"noona",age:12}
console.log(person3)	//{name:"noona",age:12}

// 두개의 값이 같아보이지만 복사 방법이 다름
// let person3 = person 이부분은 객체의 주소값만 복사
// 즉, 객체는 하나이고 그 객체를 참조하는 변수가 두개!
// ...person 부분은 실제로 객체를 하나 더 생성하는 것!

let person = {name:"noona",age:12}

let person2 = {...person,address:'인천'}
let person3 = person
console.log(person2)	//{name:'noona',age: 12, address:'인천'} //기존값에 추가도 가능함
console.log(person3)	//{name:'noona',age: 12}

let person = {name:"noona",age:12}

let person2 = {...person,name:"메밀"}
let person3 = person
console.log(person2)	//{name:'메밀,age:12} //기존값 수정도 가능
console.log(person3)	//{name:'noona',age:12}

☑️ 배열에도 똑같이 적용할 수 있다.

let a = [1, 2]
let b = [...a, 3]

console.log(b)
//[1, 2, 3]

let a = [1, 2]
let b = [...a, 3]
let c = [...a,...b]

console.log(c)
//[1, 2, 1, 2, 3]

✔️4. 삼항연산자 (condition ? value1 : value2;)

let person = {name:"noona",age:17}

if (person) {
 console.log(person.name)
} else {
 console.log("there is no person")
}
//'noona'

let person = null

if(person) {
 console.log(person.name)
} else {
 console.log("there is no person")
}
//"there is no person"

let person = {name:"noona",age:40}

if(person) {
 console.log(person.name)
} else {
 console.log("there is no person")
}
console.log(person?person.name:"there is no person")