오늘은 이전 글에서 만들었던 블로그 코드를 좀 더 간단하게 만들고 기능을 추가해 보려고 한다!
🖥 최종 출력 화면:
📝 체크리스트
- state를 사용하는 이유
- state 선언과 변경
- state로 글 목록 레이아웃 생성
- 버튼 생성 및 꾸미기
📍state를 왜 사용할까?
보통 자료를 잠깐 저장할 땐 변수를 사용하지만, react에선 변수 대신 state도 사용할 수 있다.
→ 변수는 값을 변경시, 자동으로 html에 반영 안됨
→ state는 언제 어디서 값자기 값을 변경해도 자동 재렌더링을 통해 html에 반영됨
그래서 state는 보통 자주 변경될 것 같은 html 부분을 state로 사용함
📍state 선언 및 사용
state 선언 방법은 총 4가지 단계로 이루어져있다.
1. import {useState} from 'react';
//2번 작성시, App.js 상단에 자동으로 선언됨
2. useState(저장할 값);
3. let [변수1, 변수2]
4. 전체 코드
(a) 저장할 값이 1개일 때
let [변수1,변수2] = useState(값);
(b) 저장할 값이 2개 이상일 때
let [변수1,변수2] = useState([값1,값2..]);
state 사용시, 변수와 동일하게 {변수1} 또는 {변수1[인덱스 번호]}
💡TIP. 변수명 작성시, 두 단어 이상을 합쳐서 작성할 땐 두번째 단어 맨 앞을 대문자로 작성하기! (newTitle와 같은~)
📍참조 데이터 특징
state 변경함수 동작 원리를 알기 전, state 속 저장되는 값이 2개 이상인 [array/object] 데이터는 참조 데이터라고 불리는데, 이들의 특징을 알아야 한다.
Reference Data Type:
- 참조 데이터를 저장할 시, 참조 데이터를 저장하기 위해 쓴 변수에는 데이터가 저장된 위치를 포함한 화살표 값이 저장된다.
- 보통 원본을 보존하는 것이 좋으므로, copy 변수를 통해서 원본 데이터를 복사 후 독립적인 [array/object] 사본이 저장된 복사본 데이터를 사용한다.
📍state 변경함수 동작 원리
참조 데이터 특징에 따라 변수는 화살표 값을 포함하고 있기 때문에, 기존 state에 배열 속 값을 변경하게 되면 참조 데이터 값은 바뀌지만 그들이 저장된 위치를 포함한 화살표 값은 동일하다.
→ 화살표 값이 저장된 state 변수는 변함없기(true) 때문에 state를 변경할 수 없는 것이다.
→ 그래서 [...원본 변수1];을 사용하여 원본을 보존하고 state 복사시, 독립적인 array 사본 생성 및 deep copy로 새로운 위치의 화살표가 변수에 저장된다.
📍단일 state 변경
단일 state라고 하더라도 모든 state는 '=' 등호로 변경할 수 없다.
- let [변수1,변수2]에서 변수2는 state변경용 함수로, 함수 넣는 부분에
() => {변수2(새로운 state 값)}
이 함수를 사용해야 html에도 동시에 재랜더링이 가능하다!
📍복수 state 변경
state 변경함수 동작 원리에 따라 세단계로 나뉜다.
1. let 새로운 변수명 = [...기존 변수1];
2. 새로운 변수명[인덱스] = '인덱스의 변경할 새로운 값';
3. 기존 변수2(새로운 변수명);
//기존 state 변수 값은 새로운 변수에 저장된 화살표 값으로 변경된다.
📍state로 글 목록 레이아웃 생성
전 글에서 보았던 변수로 생성했던 글 목록을 state를 사용하여 간단하게 변경해보자.
- state 선언
import {useState} from 'react';
//단일 state로 선언하기
let [title1,changeTitle1] = useState('JSX 기초 문법');
let [title2,changeTitle2] = useState('state 문법');
let [title3,changeTitle3] = useState('react로 블로그 만들기');
//복수 state로 선언하기; 배열 선언 방식과 동일함
let [title, changeTitle] = useState(['JSX 기초 문법','state 문법','react로 블로그 만들기']);- state 사용
//단일 state 사용
<div className='list'>
<h4>{title1}</h4>
<p>8월 2일 발행</p>
</div>
<div className='list'>
<h4>{title2}</h4>
<p>8월 2일 발행</p>
</div>
<div className='list'>
<h4>{title3}</h4>
<p>8월 2일 발행</p>
</div>
//복수 state 사용
<div className='list'>
<h4>{title[0]}</h4>
<p>8월 2일 발행</p>
</div>
<div className='list'>
<h4>{title[1]}</h4>
<p>8월 2일 발행</p>
</div>
<div className='list'>
<h4>{title[2]}</h4>
<p>8월 2일 발행</p>
</div>사용할 땐 단일 state와 복수 state가 비슷하지만, 선언할 때는 저장할 값이 많을수록 배열로 저장되는 복수 state 방식이 훨씬 간단하는 것을 알 수 있다.
📍버튼 만들기
버튼을 누르면 이벤트가 실행되는 기능을 만들기 위해서 onClick 이벤트를 사용한다.
<tag onClick = {함수명 또는 함수 정의 문법 넣을 수 있음}>
- 함수를 이미 정의했다면, {함수명} 넣기
- 함수 정의를 하지 않고 문법 자체를 넣을시, {function() 또는 () => {함수작성}} 넣기
//클릭시 첫번째 글 제목이 바뀌는 버튼
<button onClick = {() => {
let newTitle = [...title];
newTitle[0] = 'JavaScript 문법';
changeTitle(newtitle);'
}}
//클릭시 글 제목을 오름차순으로 정렬해주는 버튼
<button onClick = {() => {
let arrangeTitle = [...title].sort();
//title을 정렬한 후 저장해주었기 때문에 따로 인덱스마다 변경해 줄 필요없음
changeTitle(arrangeTitle);
}}블로그 코드를 훨씬 간편하게 작성하고 버튼까지 추가해보았는데, 빨리 react의 모든 기능을 머릿속으로 흡수하고싶당..
