🎄 성장일지 4.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 (1.0)키워드<br/> 최대한 간단하게 정리, 추후에 보면서 스스로 설명<br/> 🍉 (2.0)경험 위주로<br/> 단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성<br/> ❄️ (3.0)정해진 템플릿에 맞춰서<br/> 키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성<br/> (3.1)230102부터 시작되는 학습에 관한 내용 추가<br/> (3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!<br/> 🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!<br/>

🔑 오늘의 학습 키워드

부모 컴포넌트에서 fetch한 데이터를 자식 컴포넌트에게 전달하기

부모컴포넌트에서 api를 통해 data를 받아오고 이를 상태로 갖는다. 그리고 이 상태를 자식컴포넌트에게 전달하여 렌더링하려는데, 문제가 발생했다.

아래와 같은 코드에서 api를 통해 data를 받아오는 로직은 렌더링 작업이 아니므로 sideEffect로 보고 useEffect를 통해 렌더링 후에 실행되도록 한다. 그러면 data에는 null이 들어가기 때문에, 만약 Child 컴포넌트에서 data를 갖고 실행하는 어떤 로직이 있다면 (ex) data.userName) 에러가 발생한다.

const Parent = () => {
  const [data, setData] = useState(null);

  const fetchData = async (api: string) => {
    try {
      const res = await fetch(api);
      const data = await res.json();
      setIssueDetailData(data);
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchData(TEMP_ISSUE_API);
  }, []);
  
  return (
    <div>
      <Child data={data} />
    </div>
  )
}

이를 해결하기 위한 아주 간단한 방법은 아직 data가 없을 때는 Child 컴포넌트를 렌더링하지 않는 것이다. 아래의 코드와 같이 조건문 하나만 추가하면 된다.

const Parent = () => {
  const [data, setData] = useState(null);

  const fetchData = async (api: string) => {
    try {
      const res = await fetch(api);
      const data = await res.json();
      setIssueDetailData(data);
      console.log(data);
    } catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    fetchData(TEMP_ISSUE_API);
  }, []);
  
  return (
    <div>
      {data && <Child data={data} />} // data가 없을 때는 Child 컴포넌트를 렌더링하지 않는다.
    </div>
  )
}

정말 별 거 아닐 수 있지만, 이건 하나의 패턴으로 생각하고 기억해두는 게 좋을 것 같다.

결국 리액트도 자바스크립트 함수에 불과하다.

여러 곳에서 사용될 Tag 컴포넌트 코드를 작성하면서 느낀 생각이다. 뭔가 리액트 함수 컴포넌트하면 어렵게 느껴지고 복잡하게 생각되지만, 생각해보면 그냥 단순하게 하나의 함수일 뿐이다.

Tag 컴포넌트를 짜면서 아래와 같이 코드를 작성하였다.

const Tag = ({ tagType, writerName, isOpen }: TagProps) => {
  return (
      <>
        {tagType === 'openClose' ? (
            isOpen ? (
                <div className="flex h-8 w-fit items-center justify-center gap-x-1 rounded-[50px] bg-blue px-4">
                  <AlertCircle stroke="#FEFEFE" />
                  <span className="text-sm text-gray-50">열린 이슈</span>
                </div>
            ) : (
                <div className="flex h-8 w-fit items-center justify-center gap-x-1 rounded-[50px] bg-navy px-4">
                  <Archive stroke="#FEFEFE" />
                  <span className="text-sm text-gray-50">닫힌 이슈</span>
                </div>
            )
        ) : (
            <div className="flex h-8 w-fit items-center justify-center gap-x-1 rounded-[50px] border border-gray-300 bg-gray-100 px-4 text-gray-600">
              {writerName}
            </div>
        )}
      </>
  );
};

export default IssueMainInfo;

뭔가 딱 봐도 중복되는 요소가 많고 지저분한 느낌이 난다. 이 때, 딱 그 생각이 스쳐갔다. 결국엔 함수라는 것..! 해서 추후에 좀더 깔끔한 로직으로 개선해볼 예정이다 :)

📝 요약 및 하루 간단 회고

컴포넌트를 처음부터 설계하고 코드를 작성해 나아가니 조금은 감이 잡힌다. 뭔가 리액트에서 사용하는 하나의 패턴(?) 혹은 어떤 그 모양(?)을 잘 기억하고 캐치해서 사용하는 게 좋은 것 같다. 처음 리액트를 배우는 사람이 생각하기엔 다소 어려운 부분들도 있기 때문이다! 그래도 하나보면 재미있고 쾌감이 있다! 그러니 더 열심히 정진하자!

오늘의 잘한 점

• 진짜 정신차려서 열심히 하려고 한 점
• 스스로 슬럼프(?)에 지지 않고 열심히 끌어올리는 점

오늘의 아쉬운 점

• 없다..! 진짜 없는듯~!

참고

• 없음

undefined