다 이해 했는데 어떤 부분에서 막혔었는지를 모르겠다. 결국 답지를 봤는데 해당 특정 부분에서 머리가 안돌아가나 보다. 메타 인지가 중요한 걸 깨달았고, 질문에 대한 답을 하나하나 찾아가는 게 중요한 듯하다.

문제 개별 버튼 별로 눌렀을 때 해당 배열 값이 1 늘어나게 만들기

작업 3가지 분류

1. useState 선언하여 배열 값 담기 
2. 버튼 클릭 시 새로운 useState 생성하여 해당 값을 1씩 늘리기 
3. 해당 state 업데이트해주기 

해당 문제는 나 혼자서 찾아냈다. (기존 거를 보긴 했지만..)

이해가 안 갔으나 이해한 점:

1. 새로운 newCount 값을 만들었으니 수출 즉 ui 업데이트를 할 때 {newCount[i]}가 되어야 한다 생각했음. but likeChange(b)는 a 변경 시켜주는 함수로써 like가 새 배열 (newCount) 변환 된거임 함수 밖에서 newCount에 접근할 수 없는 것 같다.
2. 새로운 배열[index] = 새로운 배열[index] + 1로 만들어 주어야 한다. 반복문 개념 다시 숙지하자

    내가 한 코드 
    
	    onClick={() => {
                const newCount = [...like];
                newCount = newCount + 1;
                likeChange(newCount);
              }}   // 이렇게 하니까 기존 배열값은 세 개 인데 어쩌라고? 하면서 오류났음
            >
              {newCount[i]}
              
              
              
      likeChange(newCount + 1); // 이렇게 하면 개별 값에 1씩 추가되는 지 알았다.
													      // 그러나 이건 하나씩 onClick 이벤트 설정할 때만 사용 가능
    
   ----------------------------------------------------------------------------------- 
    
    정답 코드
    <span
              onClick={() => {
                const newCount = [...like];
                newCount[i] = newCount[i] + 1;
                likeChange(newCount);
              }}
            >
              {like[i]} // 이 부분이 왜 like?
    </span>
    
    like 였던 이유는 newCount는 likeChange(b함수)를 이용해 like의 배열 값을 변경시켜주는
    거기 때문이다.

추가 예제 : 내가 직접 함

증가 감소 둘 다 가능한 세 개 박스 제작

1. component화 , 혹은 map을 이용해 각각 3개의 <div> 만들기 (증가, 감소 버튼을 가지고 있는)
2. 각 버튼 별로 상태를 저장하는 새로운 변수 만들기
3. 해당 변수 값 각각 변화 시키기

장애 요소 및 깨달음

1. useState에서 component 값을 전달하는 게 까다로운 걸 까먹어서 왜 useState[0] 이 적용이 안되나 싶었음 → 함수에서 다른 함수로 접근 X, map() 이용해 해결