[리액트 React] 팬카페 만들기_메뉴마다 다른 색상 넣기

 // 리스트 선택시 색상을 변경하기 위한 state
  const [selectedColor, setSelectedColor] = useState(null);

  // 리스트 선택 이벤트, 클릭하면 selectedColor에 인자로 받은 color를 설정한다
  const memberClick = (color) => {
    setSelectedColor(color);
  };
  
   <Members>
        <ul>
          {backgroundColor.map((color) => {
            return (
              <List
                key={color}
                onClick={() => {
                  memberClick(color);
                }}
                backgroundColor={color}
                // 선택한 리스트를 찾기 위한 변수 selectedColor에 설정한 색상과 매개변수의 색상이 맞는지 확인
                selected={selectedColor === color}
              >
                {getBackgroundColor(color)}
              </List>
            );
          })}
        </ul>
      </Members>
      
      const List = styled.li`
  width: 10%;
  border-radius: 1rem;
  padding: 10px;
  text-align: center;
  border: 3px solid ${(props) => props.backgroundColor};

  /* List에서 선택한 li가 맞다면 백그라운드 컬러를 바꿀것 */
  background-color: ${(props) =>
    props.selected ? props.backgroundColor : "transparent"};

  &:hover {
    cursor: pointer;
    background-color: ${(props) => props.backgroundColor};
  }
`;

 

팬카페 만들기 1일 차

Home 컴포넌트 CSS적용 중, 각 멤버 이름마다 다른 색상의 borderColor를 주고 싶어서 map을 이용하여 조건부 스타일을 만들었다 

문제는 클릭을 했을 때도 각 멤버마다 다른 색상으로 backgroundColor를 주고 클릭된 멤버는 색상이 계속 적용되어야한다는것, 해결하는데 솔직히 조금 걸렸지만 정상적으로 작동한다

 

해결 방법

1. 맴버 선택 시 색상이 변경되어야 한다 => 상태가 변경된다 => useState를 활용하자
2. 멤버가 클릭 됐을때 이벤트가 일어나야한다 => 클릭이벤트 적용
3. 이벤트를 받는 맴버가 맞는지 확인해야 => 한다 변수를 이용하여 이벤트 대상을 true로 만들어준다
4. 스타일에서 삼항연산자를 활용하여 이벤트 대상이 맞을 경우 색상을 변경해 주고 그 외에는 색상 유지하면 완료