[React] 개발 참고자료 목록

개요

---

이 페이지는 React 프레임워크로 앱/웹을 구현하면서, 검색하여 참고한 사이트 및 정보를 정리해놓았습니다.

 

참고자료 목록

---

React 일반

React.StrictMode 란 무엇인가

 

"StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. 
Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다."
보통 index.js 상에서 <App> 태그를 감싸는 방식으로 사용된다.
그러나, 굳이 index.js에 쓰지 않아도 되고 부분적으로도 사용할 수 있다.
개발모드에만 영향을 끼친다니, 잠재적인 이슈를 발견해준다는데 굳이 지우고 사용할 이유는 찾기 어렵다고 생각한다.

https://zereight.tistory.com/587 [김정혁 블로그:티스토리]

 

Styled Component 란?

 

Styled-component란 CSS-in-JS라고 하는 
Javascript파일 안에서 CSS를 처리 할 수 있게 해주는 대표적인 라이브러리이다.

클래스 네임을 중복해서 사용 시 생기는 버그 방지, 구조적으로 컴포넌트와 스타일이 묶여 있어 관리하기 용이하다.

Styled-components를 import한 후에 styled.{htmlTag}``형태로 ``안에 원하는 css를 작성하면 된다.
그 후에 리액트 안에서 만들어진 Styled-component를 HTML Tag를 사용하듯이 사용하면 끝이다.

// AS-IS
// css/scss 사용 예시
import React from 'react'
import styles from 'Sample.scss'

const Test1 = () => {

  return (
    <div className={styles.Container}>
      <header className={styles.Container__header}/>
    </div>
  )
}

// 해당 방식 아용시
// styled-component 사용시
import React from 'react'
import styled from 'styled-components'
import { CommonHeader } = '@/common'

const Container = styled.div`
   ...css codes
`
const ContainerHeader = styled(CommonHeader)`
   background: red; // change red
`

cont Test2 = () => {

  return (
    <Container>
      <ContainerHeader />
    </Container>
  )
}