항해99 TIL 04

요번주는 리액트 기본을 배우며 함수형 컴포넌트와 클래스 컴포넌트를 이용하여 평점을 주고 화면이동에 대한 컴포넌트 이해를 했던거같다.

처음배우는 주특기라 강의를 들으면서 바로바로 실현은 못하고 돌려보고 코딩따라해보고 했던 주였던거 같다.(그래도 빨리끝나서 이렇게 TIL을 쓴다 ㅠㅠ 그전엔 쓸시간이 우선순위가 밀려서 못썼다.)

그럼 오늘 배운것과 그전에 배웠지만 쓰지 못했던걸 적어보도록하자.

먼저 주특기에 앞서 깃허브를 꾸며보았다. 앞으로 개발자로써 나의 명함과 얼굴이 될놈이기에 markdown을 인터넷에서 찾아보고 다른사람들이 쓴걸 참고하면서 꾸미게 되었다! 꾸미고나니 뿌듯하고 뭔가 개발자로 있어보이는거같았다.

그전에 하질 않아서 검은색으로 가득하지만.. 이제부터 토이프로젝트를 하면서 꾸준히 잔디도 심을 계획이다. 

 

그러면 주특기에 대해서 이야기해보도록하자.

 

배운것

먼저 클래스 컴포넌트 와 함수형 컴포넌트의 구조가 어떻게 다른지 알게 되었다.

클래스 컴포넌트경우 직관적으로 생성자 함수 structor 부분을 나누워 초기 state 값들을 넣어줄수있고 render() 부분을 통해 어떤 랜더링하는 부분이지 알수있었고,  return 부분에 엘레멘트를 넣어주워 원하는 컴포넌트를 화면에서 보여주는 로직을 어느정도 감을 잠았다.

 

이때 componentDidMount(), componentDidUpdate(), compoenentWillUnmount() 에 console.log 를 찍어보며 언제 이경로에 들어오게 되는지 확인하였다. 다음은 어떤식으로 리액트 컴포넌트가 실행되는지를 그려보았고 값이 업데이트될때는 어떻게 기존값이 바뀌고 그것을 리랜더링할지도 적어봤다.

리액트의 특징중하나가 Virtual DOM 을 통해 기존값과 다른것과 같은거를 비교한후 다른것을 수정 업데이트 한다는 점이다. 실질적으로 웹브라우저상에는 어떻게 랜더링되는지 뜨지 않고 가상으로 처리하게 되는데 처음 mount 가 될때 화면을 출력해준다.

함수형 컴포넌트 같은경우 구조는 같지만 constructor, render, componentDidUpdate, componentDidUpdate, componentDidWillunMount  부분이 생략되었고 this 형식도 쓰지 않는다. 기존 회사들은 클래스 컴포넌트를 쓰고 있기도 하지만 요새는 함수형 컴포넌트의 편리함으로 많이 쓴다고한다. 하지만 우리는 라이프사이클을 제대로 이해하기위해서 두가지를 같이 해본거같다.

 

 

 

아래는 리액트의 경우 양방향바인딩은 다음과 같다.

 

 

리액트의 특성 가상 DOM에서 reference 비교로 인한 무한루프 구조

이때 주의해야할게, 리액트의 경우 setState()를 사용하면 다른 ref로 생성(변경)하게되는데 가상 DOM 에서 Ref 까지 체크를 하여 기존 state과 바뀐 state을 비교하게 되는데, 자식컴포넌트로 부터 받은 바뀐 state 경우 기존의 ref 와 다르기 때문에 state 값은 같을지라도 ref가 달라 다른 값으로 인식하여 자식 컴포넌트 B에게도 다시 인자를 넘겨준다. 이렇게 되면 무한 루프에 걸리게 된다는 특성이 있다. 무한루프 해결방법은 번거롭지만 일일이 자식의 state와 함께 Ref 값도 직접 넣어주어야 다른것으로 인식하지 않는다.

 

 

 

 

 

 

 

토이프로젝트

 

먼저 요번 토이프로젝트로 만든건 일주일동안의 나의 평점을 보여주는 화면과 평점주는 화면으로 이동 할수있고,

메인화면에서는 항상 랜덤으로 평점을 매긴것이 출력되게 하였고, 평정남기기에선 원하는 평점만큼 색을 칠하게 하였고 평점 남기기를 누르면 메인페이지로 다시 돌오고 그때도 랜덤으로 평점이 매긴화면을 출력하게 해주었다.

 

스스로 피드백과 수정하고싶은점

기능은 구현했지만 요번주에 배운 리액트 컴포넌트의 강점을 제대로 활용하지 않은 기분이 든다. 부모컴포넌트에는 따로 엘레멘트를 쓰지않고 각각의 자식 컴포넌트로 나눠야하는데 App.js 처음메인과 Home 이라는 자식컴포넌트가 경로가 "/"로 같은 부분인데 굳이 같은 기능인데 따로 나눌필요가 있나 하고 Home을 없애고 Main에 기능구현 코드를 작성한게 나중에 골치가 아팠다. 특히 평점을 주고 뒤로가기를 할경우 컴포넌트 라이프스타일 특성상 didmount 부분은 한번만 실행되서 for문을 이용했을때 이를 실행하지않아 새로고침기능인 document.location.href 를 사용하게되었다. 새로고침을 하게된다면 SPA 의 장점을 이용한게 아니라고 생각하고, MPA 방식으로 내가 잘못 만든게 아닌가 생각이 들었다.  새로고침함으로써 기존 랜덤으로 평점을 주게하는 for문을 실행하게 되니 말이다. 

나중에는 무조건 각각 컴포넌트로 나누어 메인은 깔끔하고 간단하게 정리를 해야겠다고 생각했다.

 

 

 

시간은 훅훅지나가고 넘쳐나는 공부개념으로 오늘 다 적지는 못할거 같다.