개발일지 1

나에겐 프론트엔드 개발자로 일하고 있는 친형이 있다 .

형이 이직준비를 하면서 백엔드를 맡고 나는 프론트 영역의 공부를 하면서 프로젝트를

진행하기로 하였다 .

사용하는 기술은 typeScript , next js이다.

먼저 테스트로 한 부분은 카카오의 헤더를 목표로 잡고 기능을 구현하는것이었다.

카카오의 검색버튼을 누를때 검색모달창을 구현하는 방식에 대해서 나는 생각을 해보았다.

useState의 초기값을 false로 두고 버튼이 클릭이 된다면 true로 state의 값을 갱신한다.

또한 그 스테이트의 값을 참조하여 {state === true ? <컴포넌트반환> :null} 의 형식으로 하면 될것같았다.

그리고 실제로 구현을 했다 .

또한 tailwind css로 모달창을 디자인했고 한가지 걸리는 부분은 아무래도,

tailwind에서의 에니메이션 효과를 어떻게 적절하게 사용할지 고민이 되었다.

const [searchButtonClick, setSearchButtonClick] = useState<boolean>(false);
  const searchBoard = () => {
    console.log(searchButtonClick);
    setSearchButtonClick(true);
  };
  const closeBoard = () => {
    setSearchButtonClick(false);
  };
  return (
    <div className=" w-[1290px] m-auto">
      <header className="flex items-center justify-between">
        <h1 className="font-normal w-[160px] text-[28px] m-[0]">KaKao</h1>
        <Gnb></Gnb>
        <Icon searchBoard={searchBoard}></Icon>
      </header>
      {/* <Divider className="m-[0px]" /> */}
      <div>
        {searchButtonClick === true ? (
          <ConditionInput closeBoard={closeBoard} />
        ) : null}
      </div>
    </div>
  );

이런형식으로 컴포넌트의 디자인을 먼저 마친후 스테이트를 통해 값을 갱신시켜 주었다.

외부컴포넌트에선 interface Props로 타입을 전달해 함수와 각종 데이터를 넘겨주었다.