728x90
1. return
- return () 안에는 병렬로 2개 이상 기입 금지
2. state
- 자료 잠깐 보관할 때 사용
- import { useState } from 'react';
- useState(보관할 자료)
- let [작명a, 작명b]
- a -> 내가 보관한 자료, 변수처럼 사용 가능 , 직관적으로 작명
- b -> state 변경 도와주는 함수
- 변수 있는데 왜 state 써?
- 일반 변수 => 갑자기 변경하면 html에 자동으로 반영 안됨
- state => 변경 시 html이 자동으로 재랜더링 됨
- 변동시 자동으로 html에 반영되게 만들고 싶을 때 사용
- 자주 변경될거 같은 html 부분은 state로 만들어두고 나머지는 하드코딩, 일반 변수 사용
3. eslint-disable
- /* eslint-disable */ 쓰면 경고 Warning 문구들이 사라짐
4. onClick 사용법
- onClick={} 안엔 함수 이름이나 함수를 넣어야 함
- 화살표 함수로 축약 가능 ex) () => {console.log(1)}
5. state 변경하는 법
- = 등호로 변경 금지. html에 반영 안됨
- let [작명a, 작명b] 문법의 state 변경용 함수 이용해 재렌더링
state변경함수(새로운state)
let [따봉, 따봉변경] = useState(0);
<h4>{ 글제목[0]}<span onClick={ ()=>{ 따봉변경(따봉+1) } }>👍</span>{ 따봉 }</h4>
- array/object 다룰 때 원본은 보존하는게 좋음
- state 변경함수 사용 시 기존 state == 신규 state의 경우 변경 안함
- array/object 담은 변수엔 (값을 가르키는)화살표만 저장 되기 때문
- 값이 아니라 화살표만 전달 되기 때문에 작동 안함
- array/object는 reference data type이기 때문
- 변수1 & 변수2 화살표가 같으면 변수1 == 변수2 비교해도 true 나옴
- [...기존 state] 문법 사용하면 괄호를 벗겨서 다시 씌움, 독립적인 사본 생성
- state가 array/object면 독립적 카피본 만들어서 수정
<button onClick={() => {
let copy = 글제목; // let 글제목 배열의 값을 가리키는 화살표만 저장 됨
//ex) console.log(copy==글제목) -> true
copy[0] = '여자 코트 추천';
// copy는 기존 state와 달라지지 않았다고 생각해 작동되지 않음
글제목변경(copy);
}}> 수정 </button>
<button onClick={() => {
let copy = [...글제목];
copy[0] = '여자 코트 추천';
글제목변경(copy);
}}> 수정 </button>
참고 : 코딩애플 리액트 강의
728x90
'TIL > React' 카테고리의 다른 글
리액트에서 Element를 생성하는 법 (feat. Babel 사용 이유) (0) | 2022.05.02 |
---|---|
리액트 개발 환경과 JSX 문법 (0) | 2022.04.22 |