[TIL][23.11.14] React 팬레터 앱 만들기 - 1

요약

Ract로 Fan Letter App 만들기

---

고민한 내용

 

팬레터 앱 만들기 작업을 하기로해서 평소 좋아하던 마블로 작업 캐릭터에게 남기는 컨셉을 잡았다.

제일 대치되던 두 캐릭터로 탭메뉴를 구성했고, 그냥 탭을 누르는 형태가 아닌 탭을 누르면 해당 컨셉색으로 전체를 꾸며주고 싶었다. 탭을 눌렀을 때, 탭 뿐만 아니라 다른 색상들도 전부다 바뀌길 원했다.

 

생각한 해결 방법

 

먼저 아직 파일들으 쪼개기 전 단계여서 한 페이지에 정리를 하고 있다.

styled-components를 사용해서 click 했을 때 색상들을 변경하게 작업했다.

 

1. 기존 색상 정의

변경될 때 사용될 색상을 미리 정의했다

const blue = {
  basic: "#3747ff",
  light: "#838cf5",
  dark: "#1e29ab",
  back: "#c7c9ff",
};

const red = {
  basic: "#e50000",
  light: "#ff4c4c",
  dark: "#a70000",
  back: "#ffbbbb",
};

 

2. Styled props를 정해서 색상 정의

react 관련 작업물들을 보다보니 최대한 App.jsx 에는 코드를 적게 적는거 같다고 느껴서, 메인으로 쓰이게될 페이지를 따로 뺐다. 그리고 그 페이지에 사용되는 components로 따로 뺏다.

 

const FormButton = styled.button`
  border: 0;
  color: #fff;
  background-color: ${(props) => props.color.basic};
  padding: 10px;
  font-weight: bold;
  width: 100%;
  cursor: pointer;
  transition: all 0.3s;
  &:hover {
    background-color: ${(props) => props.color.dark};
  }
  &:active {
    background-color: ${(props) => props.color.light};
  }
`;

 

3. Tab 클릭시 해당되는 색상으로 변경

tab 클릭시 원하는 string 값을 넣고 그거에 해당하는 jsx일 때 color 값을 부여하면서 부분적으로 변경하고 싶은 색상을 변경해줬다.

const [tab, setTab] = useState("cap");

const tabHandler = (item) => {
  setTab(item);
};

<FormButton color={tab === "cap" ? blue : red} type="submit">
  Send
</FormButton>

---

결과 화면

 

---

회고

 

원하는 상태가 됐지만 만약 여기서 탭이 늘어나고 색상이 늘어나면, 색상 들어가는 것마다 삼항연산자가 늘어나야하는 불편함이 있다. 더 늘어나도 코드가 길어지지 않는 방법을 찾아보면 좋을거같다. 아마 지금 형태에서 더 변화가 있어야 가능할거 같다.