1. Blog(1)

deep copy

• state는 직접 수정할 수 없기때문에 복사본을 만들어서 수정한다
• 자바스크립트 내에서 array나 object 자료형을 = 등호로 복사하면 각각 별개의 자료형이 생성되는게 아니라 값을 공유한다

spread 연산자

• array나 object 자료형 왼쪽에 붙일 수 있으며 중괄호나 대괄호를 벗겨달라는 뜻
• 다른용도로 array나 object 자료형을 shallow/deep copy할 때 많이 사용한다

// 예시

...[1, 2, 3]  // 1,2,3

let 새로운배열 = [...원본배열]  // 원본배열을 copy한 독립적인 새로운배열 생성

---

component

• return 안에는 하나의 태그만 사용할 수 있기때문에 여러개의 태그가 있으면 하나의 태그(ex. <div>)로 묶어줘야한다
• 의미없는 div를 쓰기 싫으면 <> </> 이걸로 묶어줘두 된다
• component를 이용하면 복잡한 HTML들을 한단어로 치환할 수 있다 (관리가 쉽다)
• component 이름을 지을땐 영어대문자로 시작한다

component 만들기

• function을 이용해 함수를 만들고 이름을 만들어준다
• 함수의 return() 안에 축약을 원하는 HTML을 담아준다
• 원하는 곳에 <함수이름 /> 이라고 사용해주면 축약한 HTML이 그 자리에 나타난다

component로 만들면 좋은 것

• 사이트에 반복해서 출현하는 HTML 덩어리들
• 자주 변경되는 HTML UI들
• 다른 페이지를 만들때

component 단점

• state 쓸 때 복잡해진다
• 상위 component에서 만든 state를 쓰려면 props 문법을 이용해야 한다

---

조건문

삼항연산자

• JSX 안의 {} 중괄호 내에서 if문을 사용할 수 없기때문에 if문 대용역할을 할 수 있는 삼항연산자를 사용
• null : 리액트에서 텅빈 HTML을 의미

// 예시

조건식 ? 조건이 참일 때 실행할 코드 : 조건이 거짓일 때 실행할 코드