Stack Overflow 클론코딩(12/23)

우리 팀은 먼저 질문 전체 조회 컴포넌트를 만들기 시작했고(CRUD 기능이 가장 중요하기 때문),

나는 그 중 Header에 해당하는 부분을 만들기로 했다.

내가 만든 헤더,,,(내가 만든 쿠키 따라한 것 맞음(feat. 뉴진스)

만드는데에는 약 두 시간 조금 넘게 걸렸던 것 같다.

평소에는 css 파일을 따로 만드는 방법을 사용했는데, 이번 프리 프로젝트에서 우리 팀은 styled-component를 사용하기로 하여

나도 익숙치는 않지만 열심히 styled-component 연습을 하였다! 나중엔 더 손에 익겠지 ㅠㅠ

styled-component 및 css의 개념이 부족한터라... 조오금 해맸다!! ^^ 

 

오늘의 TIL

1. 너무 많은 컴포넌트를 만들지 말자. 굳이 styled 컴포넌트로 만들어주지 않아도 되는 쫌쫌따리 아이들(?)은 그 아이들을 감싸주는 styled 컴포넌트를 만든 후, 그 안에 넣어서 지지고 볶으며 css 설정을 해주자.

처음엔 두 개의 버튼을 전부 styled 컴포넌트로 만들어서 적용해줬는데, 두 버튼에 서로 겹치는 내용이 많아 이 두 개를 감싸주는 하나의 div를 만들어주는 방식으로 바꿨다.

2. styled 컴포넌트 이름을 지을 때는 최대한 직관적으로 지어주자. 내가 쓴 코드를 다른 사람이 한 번에 알아보기는 쉽지 않다.

ex) StyledHeader, StyledDiv

3. can not find module prettier 오류는 현재 파일보다 더 상단에 있는 파일에 prettier가 install 되어있을 때 버전 충돌이 일어나 prettier가 인식이 안되어 생기는 에러라고 한다. 

 

헤맸던 부분

오늘 가장 많이 헤맸던 부분은 요 아이들에 대한 구현이였다.

Unanswered를 누르면 Unanswered 버튼의 백그라운드 색이 회색이 되게 만들어야하는 것과 두 개의 버튼의 border-radius를 각각 다르게 설정해줘야 한다는 것이 조금 어렵게 다가왔다.

해결 방법!!!

클릭된 버튼을 식별하기 위해 클릭된 버튼의 아이디에 대한 상태를 만들어주고 이벤트 핸들러를 통해 버튼이 클릭될 시 해당 버튼의 id 값으로 그 상태값을 바꿔주는 방식을 사용하였다.

const [selecBtn, setSelecBtn] = useState(1);

const handleBtnColor = (e) => {
    setSelecBtn(e.target.id);
};

그런 다음 nth-of-type 식별자와 props를 이용해 클릭된 버튼의 백그라운드 색이 변하도록 만들어준다.

<StyledBtnDiv select={selecBtn}>
          <button id="1" onClick={handleBtnColor}>
            Newest
          </button>
          <button id="2" onClick={handleBtnColor}>
            Unanswered
          </button>
</StyledBtnDiv>

border-radius는 아래와 같이 first-child, last-child 식별자를 사용하여 각각 다르게 만들어준다.

button:first-child {
    border-right: 0px #838c95;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
  }

button:last-child {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}

button:nth-of-type(${({ select }) => select}) {
    background-color: #e3e6e8;
}