~0424 State Function까지

저번에 뇌를 붙잡고 끙끙대던 State 다음 파트를 마무리했다 호호 행복해라

아 그리고 정리한 날은 생일이었는데 작년에 군대에서 생일을 보내서 그런가 감흥이 없더라

귀여운 어쩔 버스데이 햄스터

자 아무튼 본론으로 와서 저번에 우리가 렌더링을 했을 때 데이터 값이 수정될 때 매번 새로 렌더링을

해줘야하는 문제가 있어 다른 방법을 배우고자 했다.

일단은 좀 더 직관적으로 이해하기 위해서 부가적인 함수의 내용들은 다 지우고 기존에 있던 Container을

제외하고는 다 지웠다 그리고 강의에서 Container함수의 이름을 App으로 바꿨는데 이건 뭐 큰 상관 없는 듯?

사진1

예전에 우리가 했던 방법은 counter라는 변수에 담아서 +1씩 하면서 사용했는데

이번에는 새로운 방법을 사용 하려한다 캡쳐화면 부터 보자

사진2, 가장 먼저 새로 생긴거를 눈에 담자 let으로 선언된 리스트형 변수 그리고 useState함수 그 밑에는 onClick함수

이 사진 전에 했던게 13번째줄 보면 let~되어있는데 처음에는 const data=React,useState()로 시작했다

초점을 여기에 맞추고 하단에 있는 어제의 나의 설명을 들어보자 ( •̀ .̫ •́ )✧

React.useState함수의 경우 console.log를 해본 결과 undefined값과 함수 한개를 받는다.

즉 useState()괄호안에 있는 초기값과 그 값을 변경해줄 함수를 array형태로 반환한다.

우리가 전에 사용했던 ler counter=0; 그리고 countUp함수같은 여러 코드를 한줄로 대체 중인 셈이다.

그래서 우리가 이 data안에 있는 함수, 값에 접근하려면 data[0] data[1]이런식으로 각각 값, 함수에 접근하는데

더 나은 방법을 사용해서 위 사진과 같이 작성했다

 

이 사진 전에 했던게 13번째줄 보면 let되어있는데 처음에는 const data=React,useState()로 시작했다~

라는 문구는 이제 접어두고 사진으로 돌아가보면 let[counter, modifier]=React.useState()을 작성했다

아까와는 달리 counter에는 초기 값이, modifier에는 함수이름 답게 값을 수정하는 함수가 각각 지정되었다.

이렇게 방금 한 방법보다 더 간단하게 작성하고 값, 함수를 응용하기도 쉽게 만들었다.

다음 파트로 넘어가보자.

 

잠깐 흐름을 바꿔서 나는 프로그래밍을 공부하다 보면 이런점이 참 힘든거 같다 무언가를 해결하는데 방법이

정말 많이 존재하고 그 방법들마다 써야하는 서식이라 던가 알맞은 상황 이런게 다 다르다보니

효율적으로 코드를 짜는 코더가 훌륭한 코더라는 말이 더 와닿는다. 어렵네.....~

ㄴ> 아 참고로 이런말 들어본적 없음 내가 지은거임 ^_^

 

 

사진3

먼저 useState에서 받는 함수의 이름을 modifier에서 setCounter로 바꾸자. 계속 함수, 변수들의 이름을 바꾸고는 하는데

상황에 맞는 이름을 바로바로 도입하는 취향 인 것같다 나도 버릇들여서 해야겠다. 

ㄴ> counter의 값을 입력받고 렌더링하는 기능을 가졌기에 이름을 setCounter로 바꾼거임

지금까지 여러가지를 했지만 우리의 궁극적인 목표인 리렌더링 따로 없이 값을 변화시키는 것을 아직 구현하지 못했다

 

state의 값 변경방법에는 두가지가 존재한다.

1. 지금껏 우리가 해온 setCounter안에 내가 원하는 값을 넣고 새로 바꾸는 방식(직접 할당)

2. 이전 값을 가져와 현재 값을 계산하는 방식(함수 할당) 사진에서 쓰인 방식으로 setCounter에서 counter state를

리렌더링 해주고(전체가 아닌 변경된 최소한의 부분만)

 

이렇게 우리는 render을 사용하지 않고도 counter의 값을 변화시키는 방법에 대하여 알아보았다. counter의 값이

변하는데도 const로 선언가능한 이유는 counter의 값을 변화시킨 것이지 재 할당 한것이 아니므로 가능

ㄴ> const가 여전히 같은 객체를 가리키고 있는 상태임

 

사진4

아 원래 다음 장에 넣어야하는 내용인데 그냥 충분히 수용할 양이라 들고왔어 호호

위의 state의 변경방법 두가지중에서 두번째 방법과 보이는 결과는 같지만 다른 방법이 존재함

사진에 나온 것 처럼 setCounter( (current)=> current+1)이 경우 위의 사진 코드를 실행 한 것과 같게

counter가 클릭 할 때 마다 1씩 늘어나지만, 이 방법의 경우 전의 state에 영향을 주는 방식이다.

 

오랜만에 state 까먹어서 들어왔을 민규를 위해 예시를 사용하자면,

1.(사진3 방법) 값으로 여러번
function onClick() {
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
setCounter(counter + 1);
}

2.(사진4 방법) 함수로 여러번
function onClick() {
setCounter(current => current+ 1);
setCounter(current => current+ 1);
setCounter(current => current+ 1);
setCounter(current => current+ 1);
setCounter(current => current+ 1);
}

1번의 경우에는 setCounter를 몇번을 호출해도 한 번만 실행되는 걸  볼 수 있고 counter가 1만 증가)
2번의 경우에는 setCounter가 호출된 만큼 counter가 증가된 걸 볼 수 있다.

 

배운바로는 지금은 이해하기는 어렵겠지만 두번째 방법이 더 안전한 방법이라고 한다,

ㄴ> 아직 와닿지는 않는다

 

아무튼 생일겸 여러가지 쫙 정리해서 후련하다. 이제 막 리액트 강의 파트 중 5분의 1을 했는데 html, css ,js와는 다르게

확 와닿는게 크게 없다 더 열심히 해야 할 것 같다 끝~ ✍(´ι _` 　)