1. 우선 Rating 컴포넌트에다가 onSelect라는 prop을 추가해준다.
Star 컴포넌트의 prop으로 내려주어서
클릭했을 때 해당하는 rating값으로 함수를 실행할 것이다.
이 함수는 별점 인풋을 만들었을 때
클릭한 값을 입력하는 용도이다.
Rating 컴포넌트 안에 있는 Star 컴포넌트에다가 rating과 onSelect를 내려준다.
Star 컴포넌트에도 rating과 onSelect prop을 추가해준다.
2. 별점을 클릭했을 떄 실행할 handleClick이라는 함수를 만든다.
별점을 보여주기만 할 때는 onSelect함수를 실행할 필요가 없다.
그래서 조건부 연산자를 사용한다.
prop이 존재할 때만 handleClick함수를 지정해 준다.
onSelect값이 있을 떄는
()=>onSelect(rating) 값으로 지정이 되고
onSelect값이 없을 떄는
handleClick의 값은 undefined가 된다.
별점을 보여주기만 하는 컴포넌트에서는
별모양을 클릭했을 때 아무동작이 일어나지 않는다.
3. Rating 컴포넌트에 onHover라는 함수도 추가해준다.
이 함수는 마우스를 올렸을 때 해당하는 별점 값으로 실행할 함수이다.
4. onClick이벤트 리스너에 handleClick을
onMouseOver로는 handleMouseOver를 내려준다.
5. 마지막으로 마우스가 영역을 벗어났을 떄
실행할 onMouseOut이라는 prop도 추가해준다.
정리하기
onSelect함수가 해당하는 rating값으로 실행되고
별점에 마우스를 올렸을 떄에는 onHover함수가 해당하는 별점값으로 실행된다.
그리고 마우스가 영역을 벗어나면 onMouseOut을 실행한다.
별점 인풋 컴포넌트 만들기
1. RatingInput이라는 컴포넌트를 만든다.
이 컴포넌트에서는 name, value, onChange를 prop으로 받을 것이다.
name과 value prop은 html input에서 사용하는 name과 value처럼
input의 이름과 값에 해당하고
onChange prop은 input을 선택했을 떄 실행할 함수이다.
2. rating이라는 State를 사용한다.
이 State는 선택한 별점을 보여주거나
마우스를 올렸을 때 별점을 미리보여줄 떄 사용할 값이다.
3. handleSelect라는 함수를 만든다.
이 함수에서는 파라미터로 받은
nextValue를 onChange함수에다가 name prop과 함께 넘겨준다.
이렇게 하면 상위 컴포넌트인 ReviewForm에서 선택한 값이 반영될 것이다.
4. 마우스가 벗어났을 때 실행할 handleMouseOut이라는 함수를 만든다.
이 함수에서는 rating State의 값을 다시 value로 변경해 줄 것이다.
5. Rating 컴포넌트에는
value값으로 rating State를 내려주고
onSelect prop으로는 handleSelect를 내려주어서
별모양이 클릭될 때마다 해당하는 값을 선택하도록 한다.
onHover prop으로는 setRating함수를 내려준다.
onMouseOut prop으로는 handleMouseOut prop을 내려주어서
마우스가 영역을 벗어났을 때 미리보기 값이 아니라 현재 선택된 값이 보이도록 한다.
이렇게 하면 별모양에 마우스를 올릴 떄마다
해당 별점이 선택된 것처럼 미리보기가 가능하다
6. RatingInput css를 추가해준다.
className을 달아준다.
Rating 컴포넌트에도 추가해준다.
7. ReviewForm 컴포넌트로 조립한다.
기존에 있던 Input을 Rating Input으로 바꾼다.
onChange도 handleChange로 받도록 바꾸어준다.
확인하기
클릭해서 선택할 때마다 ReviewForm State에 값이 잘 반영되고
마우스를 올렸을 때 해당하는 값이 미리 보이고
마우스가 영역을 벗어나면 현재 선택된 값으로 잘 보인다.
