10.26.22{코딩일기}벨로퍼트와 함께하는 모던리액트 3-1챕터리뷰(1)

[ 새롭게 알게 된 것 ]

---

1. styled-components에서 글로벌 스타일 추가하고 싶을때 createGlobalStyle 함수를 사용한다

---

사용법은 아래와 같이 간단하다

import React from 'react';
import { createGlobalStyle } from 'styled-components';

const GlobalStyle = createGlobalStyle`
  body {
    background: #e9ecef;
  }
`;

위 코드는 body태그에 회색 배경색상을 CSS 적용해주는 함수임

---

 

2. body태그안에  투두 템플릿 렌더링할땐 body안에 넣는게 아니라 병렬 태그 사용해야됨

---

처음엔 GlobalStyle을 컴포넌트로 착각해서 GlobalStyle안에 투두 템플릿을 집어넣으려고 했음

const GlobalStyle = createGlobalStyle`
  body {
    background: #e9ecef;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle>
          <TodoTemplate>안녕하세요</TodoTemplate>
      </GlobalStyle>
      
    </>
  );
}

하지만 저런 방식이 아니라 아래와 같이 해주어야됨

const GlobalStyle = createGlobalStyle`
  body {
    background: #e9ecef;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle />
      <TodoTemplate>안녕하세요</TodoTemplate>
    </>
  );
}

export default App;

아주 이쁜 템플릿이 잘 렌더링 되는거 확인 가능함

---

 

3. 기능적으로 크게 중요하지 않은 내용이라면 컴포넌트 제작대신 CSS Selector 사용하는게 좋음

---

일일이 컴포넌트를 만드는 대신 일반HTML 태그를 특정 컴포넌트에서 리턴하는 코드를 이전에 본적있는데

오늘에서야 사용기준을 알게 되었음. 

특히 조건부 스타일링 필요 없는 경우 편하게 작업하면 됨

function TodoHead() {
  return (
    <TodoHeadBlock>
      <h1>2022년 10월 26일</h1>
      <div className="day">수요일</div>
      <div className="tasks-left">하반기 취뽀할꺼임</div>
    </TodoHeadBlock>
  );
}

---

 

 

4. 기능적으로 크게 중요하지 않은 내용이라면 컴포넌트 제작대신 CSS Selector 사용하는게 좋음

---

일일이 컴포넌트를 만드는 대신 일반HTML 태그를 특정 컴포넌트에서 리턴하는 코드를 이전에 본적있는데

오늘에서야 사용기준을 알게 되었음. 

특히 조건부 스타일링 필요 없는 경우 편하게 작업하면 됨

---