#중앙정보처리학원-67일차-

11/06

react에서는 상태가 같으면 변경 하지 않게 인식 시키는데 2번째 까지는 재실행 시키긴 한다.

 

useState 를 사용 하여 text 만 받아 보여주는 것이 아닌 내부에서 활용 하여 어떻한 상태가 변경되도록
할 수도 있다.

다음을 클릭 할때마다 message border의 테두리 색이 변경이 되게 할 수도 있다. 

 

 

# HOOK(use로 시작하는 함수)

react에서 use로 시작하는 method들을 HOOK이라고 한다 

HOOK은 어떻한 상태가 되면 react에 알리는 의미로 사용 하는것을 HOOK이라고 한다.

HOOK은 조건문 안, 반복문안, 다른 함수 안에서 호출하는 행위를 하지 말고 component 제일 상단에서
사용 되어야 한다. 

사용 조건을 어겨 if 내부에 HOOK을 사용 하면 error를 발생시킨다.

 

 

 

 

# 객체변경시와, value 변경시 react 의 반응 (객체지정시 변경 방법)

 

객체 변경을 누르면 바로 반영이 안되고 값 변경을 눌렀을 때에 비로소 객체 변경을 눌럿던것을 조회 시켜준다. 

react 는 앞서 말했듯 해당 값이 같은지 다른지에 따라 re-render를 한다. 

 

 

※ js 에서의 기본타입은 String Boolean Number는 기본 타입이고 나머지는 참조 타입이다.

(객체 주소는 1인가구다.)

 

 

그래서 객체를 복사하여 사용하면 된다. 

 

객체 복사 하기 방법 2가지 

 

 

 

 

# js의 배열 method (map 으로 저장 하여 index 모두를 불러오기)

js 에서 map 메소드는 java의 stream map 처럼 index를 순회 하여 호출 한다.

그리고 js map은 새로운 배열을 반환 한다. 

이런식으로 직접 호출하여 사용할 수도 있다. 

 

key 값을 부여 해줄 때에 index번호로 주기보단 table의 pk 값 을 넣어주도록 하자.

 

다시 여기서 깊은 복사 를 복습.

이렇게 순회 하면서 상태 변화를 인식 하는것 같다. 

좀더 이해를 위해 살펴볼 필요가 있다. 

 

복사 방법 3가지

1. - 우선 newItems라는 새 배열을 받을 변수 를 설정 해준다
   - 설정해준 변수에 기존 [...items] 배열을  복사한다
   - 그리고 newitems에 입력되는 값을 item매개 변수로 받아서 push해주고 
   - 작성하진 않았지만 setItems(newitems)  setItems에 newItems를 저장 시켜주어 items의 값의 state가 변하도록 해준다
2. - 2번도 1번처럼 newItems라는 새배열을 설정해주고 items라는 배열을 복사하는데 item매개변수를 받아 배열의 인덱스에 추가 시켜준다
   - 그리고 난후 setItems에 newItems를 저장시켜준다.
3. - 3번은 2번을 더욱 간소화 시킨것으로 변수 설정없이 바로 setItems에 items배열을 복사해 item매개변수를 각 인덱스별로 집어 넣어 저장시킨것을 바로 setItems에 저장 시킨것이다. 

 

 

# 배열 에서 저장한 것을 (index)번호를 찾아 지우기

 

 

# Immer (useImmer) -> useState 대신사용

파라미터 에서 받은 객체를 원래객체처럼 사용할 수 있게 해주는 것 인데 

잘 모르겠다;;;;