(항해17일차) 220323 리액트 주특기 6일차

(아직 배포는 안했지만) 1주차 과제를 완성했다! 

글로는 짧게 쓸 수 밖에 없지만 마음은 많이 기쁘다. 

화요일부터 기능 단 두 가지를 두고 고민하는 시간이 정말 길었다. 

 

일단 첫번째 고민은 component를 구성하는 방식에 대한 고민이었다. 

원 한개를 제일 작은 단위로 삼아야 할 것 같은데, 

그러자면 나중에 메인 페이지와 세부페이지에서 원을 나누는 과정이 까다로워 보였다.

결국 원 컴포넌트를 만들었지만 결과적으로 고민이 하나 늘어났다. 

 

두번째는 원을 전달하는 과정이었다. 한 쪽에선 랜덤으로 변하는 원을 

다른 쪽 에서는 클릭한 만큼 채워지는 원을 필요로 해서 구분해야 했다.

useRef를 써서 받는 쪽에서 처리를 할까 계속 고민했지만

일단 받는 쪽에서 렌더링되는 하위 컴포넌트를 다루기가 까다롭고

그 과정을 두 번 거쳐야 한다는 생각 때문에 다른 방법을 썼다.

결국 props로 상위 컴포넌트를 구분하고

그 값에 따라 if문을 사용해 알맞은 원배열을 전달했다. 

 

세번째는 클릭했을 때 원을 채우는 일이었다. 여기서 시간을 가장 많이 잡아 먹었는데, 

1. useRef로 원을 가져와 백그라운드 스타일을 바꾼 후 setstate사용: 원이 한개만 바뀐다.

정확한 원인은 모르지만 마지막 원만 적용되는 것 같았다. useRef의 정확한 용도를 알아야겠다. 

비슷한 방법으로 getElementsbyID나 TagName 도 써봤지만 모두 적용이 안됐다.

가상돔에서는 getElementsby를 쓸 수 없다는 걸 알았다. 

2. 스타일을 state값으로 하고 클릭시 setstate(style2)로 전환하기: 일단 안먹힌다.

onClick실행 시 오류가 발생했다. 게다가 지금 생각해보니 그렇게 해서 원 한 개가 바뀐다면

나머지 원을 바꿀 방법이 마땅치 않을 것 같다. 

3. state에 임의의 값을 주고 onClick 시 원의 index와 state를 비교해 backgroundcolor를 부여한다. 

setstate는 클릭을 실행한 원의 index값을 가져간다. 정답은 3번이었다.

일단 useState의 활용법을 나중에서야 알게 되었고, style속성에 삼항연산자를 쓸 수 있는 사실을 몰랐다.

---

아직 고민되는 부분들이 많이 남아있다.    

key값으로 index를 주게 되면 이후 배열이 추가되는 경우 처리과정에서 인지를 못해 문제가 발생한다. 

그래서 key를 바꿔줘야 하는데 적절한 값을 어떻게 넣을지 모르겠다. 

또 리액트의 각종 훅 사용법이나 정확한 동작원리를 아직 잘 모른다. 이 부분을 공부해야 한다. 

일단 결과물은 나왔지만 숙제가 다시 많이 생긴 과제였다. 그래도 오늘은 기분이 좋다.