프로젝트 셋쨋날 : 헤더/토글기능

이번프로젝트는 typescript를 사용하기로 했지만 아는이 한명 없이 처음부터 사용하기엔 어려운 부분이있었다. typescript의 타입을 어떻게 정의해야 할지 몰랐기때문에 다 찾아보던가 아니면 any로 만들었어야 했는데 (사실 방법을 몰라 다 any로 만들어버렸고 실질적인 타입스크립트의 장점은 전혀 찾을 수 없는 형태가 되었다 ...ㅋㅋㅋㅋㅋ) 한줄 적을때 마다 type error가 발생해서 기가막혔다. ㅋㅋ
결국 긴급회의를 소집해서 typescript를 계속 사용할건지를 논의했다.
난 강력하게 반대를 주장했다. 이번프로젝트에서 처음사용하는 요소들이 많았는데 (리덕스 사가, next, lint, ant디자인) typescript와 lint때문에 한줄쓸때마다 에러를 경험하면서 새로운 것을 도전하기에는 시간이 촉박하다고 판단내렸기 때문이다.
다행히 팀원이 잘 받아주어 타입스크립트와 작별했다. 진짜..매우 죄송하고 감사했다

그리고 추가된 회의내용은 다음과 같다

• 월요일 회의전까지 헤더랑 토글검색바를 만들기로 했다.
• 주소검색창은 시.도/ 시군 까지 백엔드에서 데이터 크롤링 혹은 라이브러리 사용으로 구현할 예정
• 이미지파일은 경로가 아닌 이미지를 압축해서 백엔드쪽으로 전해줘야하는데 + (용량제한 프론트에서 가능하지 여부 검토)

시간이좀 있으니 맘잡고 saga공부도 주말까지 끝낼 계획이다.

토글기능 구현은 생각보다 간단했다.
눌렀을 때 토글기능이 구현됬으면 하는 Button에 onClick이벤트 함수를 주고 액션이 일어나게 해주면되는데 액션이 일어났을때 state값을 true => false 로 false => true로 변경시켜주면 된다.

토글할 때 마다 이 소소를 많이 사용할것 같아 첨부한다.

const [click, setClick] = useState(true);

const ToggleSearchbar = useCallback(()=>{
    setClick ((prev) => !prev); 
  },[])
  
{
click
? <SearchBar>
  <div style={{ display: "flex", padding:'5px 10px' }}>
    <Button
      shape="round"
      style={{ margin: 'auto 0 0 auto', textAlign: "right" }} onClick={ToggleSearchbar}>
    Close
    </Button>
  </div>
  <div style={{ display: "flex", padding:'0px 10px' }}> 
    {selectSi} &nbsp;&nbsp; {selectDo}&nbsp;&nbsp; {selectPosition} &nbsp;&nbsp; {selectframework} 
  <Radio.Group onChange={onChange} value={value} style={{ marginLeft: '20px' }}>
    <Radio value={1}>프로젝트구함</Radio>
    <Radio value={2}>스터디구함</Radio>
  </Radio.Group>
  </div>
</SearchBar>
: <div style={{ display: "flex", padding:'5px 10px' }} onClick={ToggleSearchbar}>
    <Button
      shape="round"
      style={{ margin: 'auto 0 0 auto', textAlign: "right" }}>
    Open
    </Button>
  </div>
} 

이렇게 구현하면 해당버튼을 눌렀을 때 div영역이 toggle기능화되여 열고 닫힌다.
(빨간색 부분이 토글되는 div)