[TIL] 240131(수) Styled-Component img 넣는 방법

1. React 개인과제 "그룹 아티스트 팬레터함" 만들기

멍청한 실수 1) App.jsx을 Router의 하위 컴포넌트로 부르다...🤦🏻‍♀️

Router를 이용하여 각 멤버별로 페이지를 이동시키는 작업을 진행하였다.

내가 생각했을 때, mainpage에 모든 컴포넌트가 다 들어 있으니, home으로 가는 화면은 App.jsx로 이동하면 되겠다! 라고 생각을 했다.
근데 무슨,, 계속 오류가 났다.

You cannot render a <Router> inside another <Router>. You should never have more than one in your app. 

계속 <Router /> 가 중첩으로 된단다... 나는 Router 이름을 중복으로 쓴 적도 없고, 처음 Router 설정을 한 건데 말이다...
그래서 chatGPT 한테도 물어보다가 해결이 안 되서 튜터님을 찾아갔다.

튜터님도 처음에는 뭐지 하고 새로 바뀐 router도 찾아보고 하시다가 내 코드를 보시다가 문제점을 발견해주셨다...!!!

바로 내가 path="/"로 설정한 home으로 가는 컴포넌트에 element={<App />}이 연결되어 있는게 문제였다.

return (
    <BrowserRouter>
        <Routes>
          <Route path="/" element={<App />} />
          <Route path="/jennie" element={<JENNIE />} />
          <Route path="/jisoo" element={<JISOO />} />
          <Route path="/rose" element={<ROSE />} />
          <Route path="/lisa" element={<LISA />} />
        </Routes>
    </BrowserRouter>
  );
};

function App() {
  return (
    <>
      <GlobalStyle />
      <Router />
      <Header>
      <MemberSelect />
      <WriteLetter />
      <LetterList />
      <Letter />
      <Footer>
    </>
  );
}

App 컴포넌트에서 Router를 하위 컴포넌트로 부르고 있는데, Router에서도 하위 컴포넌트로 App을 부르고 있었다...!!!
이런 멍청한 실수를 하다니... ㅋㅋㅋㅋㅋ
나는 그냥 App이 메인화면이다 라고만 생각하고 있었는데... App은 함부로 건들지 않는 걸로ㅋㅋㅋ

이후, 따로 MainPage와 Layout을 만들어주고,

// Router.js
<Route path="/" element={<MainPage />} />

// App.js
function App() {
  return (
    <>
      <GlobalStyle />
      <Router />
    </>
  );
}

로 만들어주니 메인페이지 이동도 상세페이지 이동도 아주 잘 일어난다!!

2. Basic반🐣 수업

1) 컴포넌트는 어떻게 나누나요?!

컴포넌트 구조는 처음부터 어느정도 나누고 시작을 하되, 계속해서 리팩토링을 진행하자.

2) <article> v.s. <section>

• <article> : 블로그 게시물, 뉴스 기사, 사용자 댓글 등
• <section> : 섹션, 단원, 챕터 등 / div 와 비슷한 개념이지만 더 큰 블럭

3) 대표적인 리액트 훅(Hook)

1️⃣ useState
: 화면이 변경될 때 다 useState를 사용한다.

• useState 를 사용하면 상태 값이 변경될 때 마다 해당 컴포넌트가 리렌더링된다.
• setState 는 비동기적으로 동작 할 수 있으므로, 최신 상태 값을 참조해야 할 때 콜백 함수를 사용한다.

2️⃣ useEffect
: 컴포넌트의 라이프 사이클을 함수형 컴포넌트에서 효과적으로 관리 할 수 있게 해주는 Hook.

4) 컴포넌트 라이프 사이클

1️⃣ 마운트 (Mount) = CREATE & READ
: 컴포넌트가 화면에 처음 렌더링 될 때 실행된다.
= 해야할 일 다 끝내고 화면에 딱 보여짐.

ex) API 호출, 이벤트 리스너 설정

2️⃣ 업데이트 (Update) = UPDATE
: 상태 변경이나 부모 컴포넌트로부터 받은 props가 변경될 때 실행된다.
= 리렌더링 된다. = 화면이 변경된다.

ex) 상태 또는 props에 의존하는 데이터 갱신

3️⃣ 언마운트(Unmount) = DELETE
: 화면에서 사라지는 것.

ex) 이벤트 리스너 제거, 클린업 작업

Emotion이 styled-component랑 사용 방법이 똑같다.
채용 공고 - 사용 기술 찾아보자.

3. Styled-Components 에서 img 파일 불러오기 🏞️

(저 이모티콘 같이 생긴 거지 같은 액자 모양만 하루종일 붙잡고 있었다;;)

logo png 파일을 넣고 싶어서 계속해서 img 파일 넣는 방법을 찾아봤는데, 다 해결이 안 되어서 마지막 보류 chatGPT 한테 질문을 했더니 바로 해결을 해주었다!!!

나는 img들을 모두 scr > assets > image > 파일 저장 안에 원하는 이미지들을 저장해놓았다!

1) 원하는 파일을 정확한 경로로 import 해오자

import youtubeLogo from "../../assets/images/youtubeLogo.png";

2) styled-components로 작성하기

이때...! 바로 img.attrs({src : 변수명, alt:"이름",})을 작성해주고, 이후에 벡틱을 이용해 CSS 작업을 하는 것이었다.

const StImgYoutube = styled.img.attrs({
  src: youtubeLogo,
  alt: "유튜브 로고",
})`
  height: 25px;
  cursor: pointer;
`;

** img.attrs란?
HTML 속성을 추가하거나 기본값을 설정할 수 있는 유용한 기능으로, attrs 함수는 컴포넌트에 속성을 추가하고자 할 때 사용되며, 이를 통해 컴포넌트를 확장하거나 기능을 부여할 수 있다고 한다.

따라서, img 태그에서 src와 alt 속성을 사용하기 위하여 attrs 함수를 사용한다.

또한, src 속성에는 import 해 온 youtubeLogo 라는 변수명을 작성해준다.

이렇게 했더니 footer에 youtube 로고가 들어 가는 것을 확인 할 수 있었다!!

3) 마지막으로 html에 styled component 적용!

<StFooter>
  <StImgLink href="http://www.youtube.com/@BLACKPINK">
    <StImgYoutube />
  </StImgLink>
</StFooter>

▶️ 나는 로고 앞 뒤로, a 태그를 달아서 링크를 연결해 주었다.