[React 02] Styled-components, 삼항연산자, 비구조화 할당

Styled-components
- React의 css 스타일링 방법 중 하나
- css 파일이 아닌 js 파일에 직접 기술
- 컴포넌트 호출 시 필요한 컴포넌트만 호출
- className을 사용하지 않아 겹치는 오류 방지

단점
- css를 줘야할 태그들은 전부 컴포넌트화
ex)
<oooo/>
- 따라서 가독성이 떨어진다.
- css를 수정할 때 직접 수정할 컴포넌트를 찾아가야함

그외의 스타일링 방법

1. className로 css를 주는 방법

2. SASS, SCSS (CSS보다 상위버전)
  - 복잡한 작업을 쉽게 해주고, 코드의 재활용성을 높여줌
  - css 내에서 변수가 사용 가능 = 확장성이 높음
  - 코드의 가독성을 높여주고 유지보수를 쉽게 해준다

3. Emotion
- Styled-components와 대체될 유망주, 그러나 사용법이 똑같습니다, 대신 더 가벼워요

====> 취향 차이, 방식은 달라서 익숙해지는 오래 걸리지만
====> css 문법을 사용하기 때문에 습득하는데에는 오래 걸리지 않음 

---

* '대체된다' 
특히 라이버리를 사용하는 개발자는 유행에 민감함
하루가 다르게 라이브러리들이 쏟아져 나오고 기존에 라이브러리들은 발전되기 때문에 

기존에 있던것을 대체시킬만한 메리트가 있어야 한다.


styled-components 사용방법 
터미널에 
npm i styled-components
입력하여 다운받기

 

---

삼항연산자
- 조건부 랜더링 방식에 사용된다.
(조건에 충족할 경우 해당 부분을 랜더링)

{     조건식   ? true인 경우 : false인 경우}
{is === love ?       😍      :      💔       }

*ture 일때만 값을 주고 싶을때 
&& 조건부 랜더링 방식 사용
삼항연산자 {조건식? true : null} 말고
{조건식 && true}로  간단하게 사용가능

 

삼항연산자가 React에서 쓰이는 경우

•  로딩페이지를 띄울 때 백엔드 통신중일 때                                                                                                                                 Loading =>> true --> 로딩페이지를 보여주고 false가 되었을 때 (백엔드와 통신이 성공했을 때) 그때 화면을 보여주기
• 팝업창, 모달창 '예' 버튼 클릭하면 어떤 값이 true가 되고 false가 됨에 따라 컴포넌트를 띄우고 안띄우고 (보이게 안보이게) 해주기 

 

 

---

* 비구조화 할당(구조분해할당)

const { 객체내 키 값 } = 객체
=> 배열이나 객체의 속성을 해제하여 그 값을 개별 변수에 담을 수 있는 JavaScript 표현식

props (프롭스)
상위 컴포넌트의 값을 하위 컴포넌트에게 전달하는 값

const Hello = ( {name, color, islover, style }) => {
      return(
            <div style = {style ? style : {color} }>
                  안녕하세요
                  {name}님! {islover ? <span>★</span>: null}
                  {islover && <span>♥</span>}
            </div>
      )
}
// 만약 Props가 전달된것이 없을때 defaultProps를 줌 
Hello.defaultProps = {
      color: "red"
}
export default Hello

 

 

 

function App() {

  const user = "오렌지"

  const style = {
    color : "deepskyblue"
  }

  return (
    <>
      <Hello name="김사과"/>
      <Hello name="반하나" color="green"/>
      <Hello name={user} style={style} islover/>
    </>
  )
}
export default App;

결과