📝 저번 리액트 환경 구축에서 활용했던 영상 시리즈를 이어 시청하며 기본적인 개념을 익힌다.
📌JSX 문법
-
.js 파일인데 html과 같은 문법을 쓴다. 이게 뭐지?
✅.js파일에서 쓰는 html == JSX -
CSS 지정해줄때, class가 아니라, 'className'
-
변수 넣을때는 { 변수 } == 데이터 바인딩
// 서버에서 가져온 데이터라고 가정
let post = '강남 우동 맛집'
<h4>{ post }</h4>- css외에 style을 직접 넣을 때는 style={{스타일명:'값'}}
<h4 style={ {color:'red', fontSize:'16px'} }></h4>- return() 안에는 병렬로 태그 2개 이상 기입이 불가능하다.
ex)
return(
<div className="app">
</div>
<div></div>
);📌state
- 자료를 저장할 때는 변수(var,let,const)를 사용하기도 하지만, 자료를 잠깐 저장하기 위해 state를 사용하기도 한다.
✅state 만드는 법
- import {useState}
- useState(보관할 자료)
- let [작명1,작명2]
- 작명 1 : state에 보관했던 자료
- 작명 2 : state 변경도와주는 함수
import { useState } from 'react';
function App() {
let [a,b] = useState('여자 코드 추천');
}
- Destructuring 문법
let num=[1,2]; - array에서 각각 1, 2를 뽑아내고 싶다면 인덱스를 활용할 수 있다. let a = num[0]; let c = num[1]; - 또다른 방법이 바로 destructuring! let [a,c]= [1,2];
❓변수 문법이 있는데 왜 state를 사용해야할까?
- 일반 변수는 갑자기 변경이 되면 html에 자동으로 반영이 되지 않는다.
- 하지만 state는 갑자기 변경되면 state를 쓰던 html은 자동 재렌더링이 된다.
- 자주 변경될 것 같은 html 부분은 state로 만들자!
📝좋아요 버튼 + 좋아요 수 나타내기
- onClick = {함수}
function 함수 (){
console.log(1);
}
<div className="list">
<h4>{ 글제목[0] }<span onClick={ 함수 }>😊</span> {따봉} </h4>
<p>5/14 발행</p>
</div>
- 함수 그대로 집어넣어도 괜찮음
onClick={function(){console.log(1)}}
onClick={()=> {console.log(1)}}📌 state 변경하는 법
- 항상 state 변경함수 사용하기!
- state 변경함수 (새로운 state)
let [따봉,따봉변경]= useState(0);
<div className="list">
<h4>{ 글제목[0] }<span onClick={ ()=> {따봉변경(따봉+1)} }>😊</span> {따봉} </h4>
<p>5/14 발행</p>
</div>📝버튼 누르면 array로 구성된 state 값 바꾸기
- 버튼을 클릭하면 '여자 코트 추천' -> '남자 코트 충전'으로 변경하고 싶다.
let [글제목,b]= useState(['여자 코트 추천','강남 우동 맛집','파이썬독학']);
<button onClick={()=>{
let copy=[글제목];
copy[0]= '남자 코트 추천';
b(copy);
}}>button</button>-
이렇게 하면 버튼을 클릭해도 변하지 않는다.
❓ 왜?
🔴 state 변경함수의 특징 중, 기존 state==신규 state의 경우 변경하지 않음.
🔴 [array/object] 특징 : array/object 담은 변수에는 화살표만 저장됨.
🟣 변수1 & 변수2 의 주소가 같으면 변수1==변수2 비교해도 true 나옴 (ex. copy == 글제목)
✅ array를 수정했지, 변수에 있는 주소는 수정된 상태가 아니다. 따라서 state가 변경되지 않은 것으로 인식! 따라서 state 변경을 안해줌! -
해결책
✅ array를 다른 주소에!
✅ state가 array/object 라면 독립적 카피본(shallow copy)을 만들어서 수정해야 한다.
let copy=[...글제목];📌 컴포넌트 만들기
📝 컴포넌트 만드는 법
1. function 만들기 (아예 바깥에!)
2. return()안에 html 담기
3. <함수명></함수명> or <함수명/> 쓰기
function Modal(){
return (
<div className='modal'>
<h4>제목</h4>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}❓어떤 걸 컴포넌트로 만들면 좋을까?
- 반복적인 html 축약시
- 큰 페이지들
- 자주 변경되는 것들
❎ 컴포넌트의 단점
- state를 가져다쓸 때 문제가 생긴다. (a 함수에 있는 변수는 b 함수에서 마음대로 가져다 쓸 수 없으니까!)
++ 의미없는 div를 작성하기 싫다 -> <></> 사용 가능
FE Programmer