React state, props

다시 기초 다지기 리액트 재활훈련 1일차..

eslint의 warning은 별로 신경을 안써도 된다는 것을 이제야 알았다.
useEffect 사용시 의존성 배열 경고할때마다 스트레스 받았었는데..

사용하지 않는 코드나 함수가 있는 페이지에 다음과 같이 써주면 경고가 사라진다. 편안과 동시에 불편

/* eslint-disable */

우선 state 사용법

const [변수명, set변수명] = useState(초기값);

구조분해할당으로 첫번째 인자에 변수명을 간편하게 사용하고 두번쨰 인자에는 상태를 변경할 수 있는 핸들러함수명을 적어준다. 값에는 배열 객체 넘버 스트링 불리언 널 모두 가능하다.

*const로 선언하는 이유는 상태명 중복시에 알기 쉽게하기 위해서라고 한다!

const 초기값 = ['원본배열1', '원본배열2', '원본배열3'];
const [상태, set상태] = useState(초기값);

let 복사할랭 = 초기값; //탈ㄹㄹㄹ락
복사할랭[0] = '바꾼배열1'; //탈ㄹㄹㄹ락
set상태(복사할랭); //탈ㄹㄹㄹ락

let 복사할랭 = [...초기값]; //짞짞짞
복사할랭[0] = '바꾼배열1'; //짞짞짞
set상태(복사할랭); //짞짞짞

위 탈락한 문법을 보면 리액트 state 핸들러함수 동작원리 때문인데,

• state 핸들러함수가 사용되면 기존state === 신규state를 먼저 검사하기 때문에 탈ㄹㄹㄹ락 복사할랭 = 초기값; 과 같이 할당한다면 상태가 변하지 않는다.

왜냐? 식별자와 값을 담는 메모리가 따로 저장되는데,

복사할랭 = 초기값; 과 같이 할당한다면 배열의 값들은 따로 저장되고,
복사할랭 이 위에 선언한 초기값 처럼 배열의 값들과 이어주는 화살표를 복사해서 둘 다 같은 자료를 가리키게되어 값을 공유하게 되고 state는 변하지 않게된다.(설명은 어려워)

... 스프레드 연산자는

간단히말해 괄호 없애는 연산자이다.
배열을 만들어놓고 [...[초기값배열의 괄호 없애기]] => [초기값 복사]

props는...

읽기 전용 매개변수 라고 생각하면된다. 부모가 자식한테만 주는사랑.. 자매 남매간에 사용 불가.