댓글 프로필 사진마다 랜덤색상 적용해보기

 

우선 색상 랜덤 생성 함수를 만든다. 밝은 색만 만들어내게 범위를 지정해주었다.

 

 const randomColor = randomBrightColor();
        return (
          <StReviewContainer key={item.id} onClick={handleModalClose} $reviewLength={reviews.length}>
            <StReviewInfoWrap>
              <StReviewWriterProfileImage $randomColor={randomColor}>{item.nickname[0]}</StReviewWriterProfileImage>

 

그런다음 map을 돌릴때 randomColor를 생성해서 프롭스로 넘겨준다음 스타일드 컴포넌트 선언 부분에서 배경색을 처리해주었는데, 문제는 이렇게 하면 아래와 같이 화면이 리렌더링 될때마다 색이 바뀐다는 것이다.

해결하기 위해서는 색상마다 지정된 컬러값을 생성해서 배경색 style을 지정해주어야 했다.

일단 리렌더링 될때마다 색이 바뀌는 것을 방지하기 위해 각 리뷰 댓글마다 지정해줄 색 배열 state를 만든다.

useEffect를 사용하여 useEffect 안에서 review를 map하여 리뷰 댓글 수 만큼 랜덤 색상 배열을 생성해서 set해준다.

의존성배열에는 reviews를 추가한다. 

 

  const [randomColorList, setRandomColorList] = useState([]);

  useEffect(() => {

    const randomColors = reviews.map(() => randomBrightColor());

    setRandomColorList(randomColors);

    console.log(randomColors);

  }, [reviews]);

 

      {reviews?.map((item, idx) => {

        return (

          <StReviewContainer key={item.id} onClick={handleModalClose} $reviewLength={reviews.length}>

            <StReviewInfoWrap>

              <StReviewWriterProfileImage style={{ backgroundColor: randomColorList[idx] }}>

이렇게 색상 리스트를 만들고  map을 돌리는 부분에서 각 추가된 댓글이 랜덤색상을 가질 수 있도록 색상list에 idx번째로 지정해준다. 이렇게 하면 위 움짤처럼 리렌더링될때마다 색이 현란하게 바뀌는 것은 막을 수 있다.

하지만, 의존성 배열에 review가 들어가 있으므로 리뷰가 추가, 삭제될때마다 색이 바뀐다ㅠㅠ

이후 useMemo 등을 사용해서 계속 시도해봤는데 잘 안돼서 리뷰 등록시 state에 프로필 컬러를 추가하는 방식으로 바꾸었다..