리액트 props, styled-components

cnlgks1·2022년 7월 5일
0

React

목록 보기
2/4
post-thumbnail

props

  1. 부모 컴포넌트에서 자식컴포넌트로 값을 전달
  2. 자식컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명={state이름}/>
  3. 자식컴포넌트 function으로 가서 props라는 파라미터 등록 후 props.작명 사용
  4. 컴포넌트들 중 최고로 높은 부모 컴포넌트에 state를 작성

function App (){
  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  return (
    <div>  
      <Modal color={'blue'} 글제목={글제목}/>
    </div>
  )
}
function Modal(props){
  return (
    <div className="modal" style={% raw %} {{ background : props.color }}{% endraw%}> 
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

styled-components

  1. 터미널에서 npm install styled-components 입력
  2. 상단에 import styled from 'styled-components' 추가
  3. styled-components 사용 시 장점
    • CSS 파일 오픈할 필요없이 JS 파일에서 바로 스타일적용 가능
    • 여기 적은 스타일이 다른 JS 파일로 오염되지 않는다. CSS파일은 오염된다.
    • 페이지 로딩시간 단축
  4. css파일도 다른 JS파일에 간섭하지 않는 모듈화 기능 제공
    • 컴포넌트명.module.css 로 css파일을 작성한다.
import styled from 'styled-components';

let Box = styled.div`
  padding : 20px;
  color : grey
`;
let YellowBtn = styled.button`
  background : yellow;
  color : black;
  padding : 10px;
`;

function Detail(){
  return (
    <div>
      <Box>
        <YellowBtn>버튼</YellowBtn>
      </Box>
    </div>
  )
}
  • div태그를 하나 만들고 싶으면 styled.div 사용
  • p태그를 만들려면 styled.p
  • 오른쪽에 `` backtick 기호를 이용해서 CSS 스타일을 작성
  • 그럼 그 자리에 컴포넌트를 남겨주는데 변수에 저장해서 사용

styled-components에 props를 활용

import styled from 'styled-components';

let YellowBtn = styled.button` 
  background : ${ props => props.bg };
  color : ${ props => props.bg == 'blue' ? 'white' : 'black' };
  padding : 10px; 
`; 

function Detail(){
  return (
    <div>
      //props 전송시 작명={} 이렇게 전송안하고 따옴표를 써도 가능하다. 
      <YellowBtn bg="orange">오렌지색 버튼임</YellowBtn>
      <YellowBtn bg="blue">파란색 버튼임</YellowBtn>
    </div>
  )
}

참고 문헌 및 사이트

profile
기초부터 탄탄히

0개의 댓글