TIL 17 React 별점구현하기(기본)

1.  첫번째로 생각했던 기능구현

 

들어갔을때 첫 화면

팀프로젝트로 영화리뷰사이트를 배정받았고 그중에서 영화상세페이지를 맞게되었다. 가장 처음으로 접근한 방법은

마우스 커서위치에 따라서 별 색깔을 달라지게 구현을 하려고 했다. 자바스크립트에서 pageX, pageY를 통해서 

해당 커서위치 좌표를 받아서 그것을 사용해서 조건문을 통해 img의 src를 바꿔주기로 했다.

 

if(e.pageX < 430) {
	this.setState({
    	imgUrls:['/images/emptystar.png',
        		'/images/emptystar.png',
                '/images/emptystar.png',
                '/images/emptystar.png',
                '/images/emptystar.png',]
                })
     } else if(e.pageX>=430 && e.pageX<450) {
     		this.setState({
    	imgUrls:['/images/star.png',
        		'/images/emptystar.png',
                '/images/emptystar.png',
                '/images/emptystar.png',
                '/images/emptystar.png',]
                })
         } .
           .
           .
           .

 

이런식으로 if else if문을 사용해서 각각의 위치에따라 별점의 url이 들어가있는 배열을 할당해줘서 map으로 해결하려고 했다.

근데 문제가 발생하는데 첫번째는 딱봐도 코드가 정말로 길어보인다. 그리고 가장 큰 문제는 pageX에서 나왔는데

모니터의 크기에 따라 별점이 위치한 좌표값이 달라지면서 제대로 작동이 안하는걸 발견했다.

그래서 결국 멘토님의 피드백에따라 갈아엎기로 했고 추천해주신 방법은 바로 react의 핵심 컴포넌트를 활용하는것이었다!!!

 

Star 컴포넌트를 재사용한 코드

 

스타 컴포넌트를 만들어서 이를 재활용하는 방법이다. 각 스타 컴포넌트는 자신이 몇점에 위치해있는지 모르기때문에

props로 몇점인지 알려주는 score라는 props를 할당을 해준다. 그 외에도 현재 기능구현을 하기위해서 추가적인

props들을 주었지만 핵심은 score다. fill이라는 props가 보일텐데 이는 Star컴포넌트에 Svg파일을 컴포넌트화 시킨걸

넣었는데 fill이라는 props를 전달해줘서 색깔을 변화시키기 위해서 넣어준것이다. 나머지는 함수를 전달해준것이다.

 

Star 컴포넌트 내부모습

 

맨위에서 두번째줄에 import { ReactComponent as StarSvg } from './star.svg'라는 코드가 보일텐데

이는 별모양 svg파일을 컴포넌트화 시키기 위한 import문이다. 밑에 StarSvg컴포넌트 fill props에 Star컴포넌트에서 받은

fill값을 할당해준걸 볼 수 있다. 별모양에 마우스갓다놓으면 props로 받은 score값이 getStarScore함수의 매개변수로

넘어가면서 작동이된다.

 

최상단 컴포넌트에 선언된 getStarScore함수

 

별점기능구현

 

마우스가 Star컴포넌트에서 움직일때마다 해당 Star의 스코어값을 최상단 컴포넌트의 state에 설정된 displayScore에

props값으로 받은 score을 넣어준다. 이렇게 하면 마우스의 위치에 따라 Star의 score props값이 변경될때마다 

갱신되면서 이를 통해서 별의 색깔을 바꿔줄 수 있다!!! 복잡하고 길고 오류있는 조건문대신에 컴포넌트를 활용하면

별점 기능을 손쉽게 구현이 가능하다.... 처음에는 이해하는데 한참 걸렸다. 멘토님이 한 3번정도 설명해준걸 듣고나서

그때서야 깨달았다. 자식 컴포넌트에서도 부모 컴포넌트의 state값을 함수의 인자로 받은 값으로 변경이 가능한걸!!!!

 

아직 프로젝트를 계속해서 진행중이지만 리액트를 사용할때마다 느끼는건 컴포넌트를 어떻게 나누고

또 어떤식으로 재활용하는지가 너무나도 어렵다. 아직 익숙하지않아서 그런걸로 믿고 계속해서 성장해 나가면 

언젠가 자유자래로 사용할 수 있을거라고 굳게 믿는다!!!