🚀 'state' 와 'state변경함수' 란?
state는 변동이 많을 데이터의 기본값을 지정하는 것(useState()활용)state변경함수는 기본데이터를 변경할때 쓰는 함수
let [state이름, state변경함수] = useState(기본값)
따라서 onClick 또는 onChange등의 기능을 활용하면 state변경함수를 활용할 수 있다.
1) HTML에 보여지는 부분에 {state이름}을 넣어서 기본값을 보여주고
2) event가 적용되는 부분에 onClick={ () => {state변경함수(바뀔값)} }을 넣어준다.
❗ 값을 변경할 때는 꼭 지정된 state변경함수를 써야한다!!!
❗ state를 변경하려면 state 변경함수를 꼭 이용하십시오!!!
❗ event 기능을 적용할 때, 꼭 중괄호로 감싸고, 그 안에 함수를 넣어주기
🌝 onClick = { state변경함수(변경할 값) } 🌝
onClick안에 "함수"를 적을 때, 아래 3가지 경우 모두 가능
<div onClick={ showModal }> (showModal은 어디 다른데 만들어둔 함수 이름) <div onClick={ function(){ 실행할 코드 } }> <div onClick={ () => { 실행할 코드 } }>
🚀 'state변경함수' 활용
state의 값을 완전히 대체해버리는 함수
🐣 따봉만들기 예제
function App(){ let [title, setTitle] = useState( ['스릴러 영화 추천', '쌈밥 맛집 추천'] ); return ( <div className="App"> <div className="black-nav"> <div>개발 blog</div> <div> <h3> {title[0]} <span>👍</span> 0 </h3> // 따봉과 따봉갯수를 추가 </div> </div> </div> ) }위 예제에서
따봉버튼과 따봉버튼을 눌렀을 때 count가 되는숫자를 추가해 주었다.
즉,따봉버튼에 onClick 이벤트를 적용하여 클릭할때마다 count가 되도록 설정하면
숫자가 +1이 되도록 기능을 구현해야 한다.function App(){ let [title, setTitle] = useState( ['스릴러 영화 추천', '쌈밥 맛집 추천'] ); let [like, setLike] = useState(0) // like의 기본 state 초기값은 0으로 설정 return ( <div className="App"> <div className="black-nav"> <div>개발 blog</div> <div> <h3> {title[0]} <span>👍</span> {like} </h3> // 변하는 값을 state로 설정 </div> </div> </div> ) }0이라는 숫자는 변하는 값이기 때문에 state로 지정해준다. like라는 state를 생성하여 HTML에 보여질 부분에
{like}로 넣어준다.function App(){ let [title, setTitle] = useState( ['스릴러 영화 추천', '쌈밥 맛집 추천'] ); let [like, setLike] = useState(0) // like의 기본 state 초기값은 0으로 설정 return ( <div className="App"> <div className="black-nav"> <div>개발 blog</div> <div> <h3> {title[0]} <span onClick={ () => {setLike(like + 1)} }>👍</span> // 따봉에 onClick이벤트를 설정해준다. {like} </h3> </div> </div> </div> ) }
따봉버튼에 onClick이벤트를 설정해준다. 이벤트 기본 틀:onClick={ 함수() }
따라서onClick={ () => {setLike(변경할 값)} }을 설정해주고,setLike라는 state변경함수의 내용에는 앞으로 변경할 값을 담아준다.
onClick이벤트로 인해 변경하고자 하는 값은 한번 클릭할 때마다 like가 +1 되는것이기 때문에setLike( like + 1 )이라고 내용을 저장해준다.
💡 state변경함수 를 활용하여 state의 값을 완전히 대체할 수 있다. 만약 state데이터를 "일부"만 변경(수정)하고 싶다면?
1) state의 데이터 일부를 변경하는 기능을 가진 함수를 만든다(=handleChangeTitle())
2) 함수 내에서 새로운 변수를 선언하고, state의 내용을 복사해서 새로운 변수에 담는다 ([...state이름])
❗ spread 연산자 사용하기
state변수를 그대로 담는건 복사가 아닌 값 공유이므로 해선 안된다. spread연산자를 사용해야만 독립적인 array 복사본을 생성해주는 copy가 가능
3) 새로운 변수에 '대체할 값'을 담는다
4) state변경함수를 실행하고 소괄호 안에 새로운 변수를 담는다
🐥 요약
리액트에서 state를 수정하고 싶으면 보통 이런 패턴으로 코드를 짠다.
수정하고 싶은 state의 deep/shallow 카피본을 하나 생성.
카피본을 입맛에 맞게 수정.
카피본을 state변경함수()에 집어넣기.
🐣 title내용 바꾸기 예제
function App(){ let [title, setTitle] = useState( ['스릴러 영화 추천', '쌈밥 맛집 추천'] ); function handleChangeTitle() { // state내용 수정할 함수 생성 let newTitle = [...title]; // state내용 deepcopy(spread연산자 사용) newTitle = '로맨스 영화 추천'; // 대체할 내용 새 변수에 담기 setTitle(newTitle) // state변경함수(setTitle)안에 바뀐내용 넣기 } return ( <HTML 생략> <button onClick={ handleChangeTitle }> 수정버튼 </button> // ❗ 미리 정의된 함수를 넣을 때는 소괄호를 넣지 않는게 포인트!!!!!!!! <h3> { title[0] } <span>👍</span> { 따봉 }</h3> </HTML 생략> ) }
