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>
  )
}

참고 문헌 및 사이트

• https://codingapple.com/