리액트 시작하기4 - 리액트 기초

styled-components

컴포넌트가 많은 경우 css 스타일링 하기 어려운 점이 있다. 컴포넌트 제작 시 스타일을 바로 입혀서 컴포넌트를 만들 수 있는데, (styled-components)를 이용하면 된다.

import React, { useState } from 'react';
import styled from 'styled-components';

//padding이 20px인 div를 만들자
let Box = styled.div`
  padding : 20px;
`;

function Detail(){
  return (
    <div>
      <Box></Box>
    </div>
  )
}

props로 스타일링도 가능하다.

let title = styled.h4`
    font-size: 25px;
    color: ${props => props.colors}
`;

...
<title colors="blue">Blue title</title>
<title colors={'red'}>Red title</title>

이런 식으로 같은 컴포넌트이지만, props 문법을 이용해 각각 다른 스타일링을 할 수 있다는 점이 styled-components의 장점이다.

SASS

CSS는 주먹구구식으로 작성하면 되는 원초적인 스타일링 언어이다.

근데 CSS를 조금 더 프로그래밍언어스럽게 다룰 수 있는 CSS 대체 문법이 존재한다.

SASS라는 pre-processor 입니다. 이걸 이용하면 변수, 반복문, 함수 이런 문법으로 CSS를 작성할 수 있다.

[예시]

Html

<ul class='list'>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

CSS

.list {
    /*blah blah*/
}
li {
    /*blah blah 2*/
}
li:first-child{
    /*blah blah first*/
}

scss

.list {
    /*blah blah*/
    li {
        /*blah blah 2*/
        &first-child {
            /*blah blah first*/
        }
    }
}

sass (scss에서 괄호와 ;가 사라진다.)

.list
    /*blah blah*/
    li
        /*blah blah 2*/
        &first-child
            /*blah blah first*/

왜 SASS를 사용할까?

• 변수 사용 가능

$mainColor : #ff0000; 
.red { color: $mainColor; }

• nesting문법위와 같이 작성 시 selector 해석이 쉽고 관련된 class 관리가 편하다.

  /* div.container.h4{} div.container.p{} 를 아래와 같이 간결하게 작성할 수 있다.*/
  div.container { h4 {} p {} }

• extends 문법CSS코드를 재사용할 때, extends를 활용하면 비슷한 UI만들기가 쉬워진다.

  (Detail.scss 파일)
  .alert { //blah blah }
  .alert2 { @extend .alert; //blah blah }
  .alert p { blah blah }

• @mixin / @include 문법
  mixin은 함수를 만드는 문법이다. function 키워드 대신 @mixin을 작성하고 함수 호출 시 @include를 사용한다.

  (Detail.scss 파일)
  @mixin testFunc() {
      //blah blah 
  } 
  .alert { @include testFunc() }

Lifecycle & Hook

Hook들은 원래 class로 만든 컴포넌트에서 사용 가능하다. (참고 : 컴포넌트의 생명주기)

class Clock extends React.Component {
      ...
    //컴포넌트 첫 등장 후 실행할 코드
    componentDidMount() {...}
    //컴포넌트가 사라지기 전 실행할 코드(페이지 이동 등)
    componentWillUnmount() {...}

    render() {
        return (
              ...
        );
      }
}

최근에는 useEffect를 활용한다.

import React, {useState, useEffect} from 'react';

function Test(){

      useEffect(()=>{
        // Test컴포넌트가 처음 등장(mount)하고 나서 실행할 코드
      });

      return (
        <HTML많은곳/>
      )
}

useEffect()내의 코드의 실행조건은 다음과 같다.

• 컴포넌트 mount가 끝났을 때(컴포넌트가 첫 등장해서 로딩이 끝난 후)
• 컴포넌트가 update 되고 난 이후(재렌더링 되고 난 후)

업데이트 시 실행시키고 싶지 않을 경우

useEffect(()=>{
   let timer = setTimeout(()=>{ setAlert(false) }, 2000);
}, [alert]);

위의 경우, alert라는 이름의 state가 변경될 때만 업데이트로 간주하고 실행해달라는 의미가 된다. 1. Test가 로드될 떄, 2. alert라는 state가 변경이 될 때만 실행된다.

useEffect(()=>{
    let timer = setTimeout(()=>{ setAlert(false) }, 2000);
}, [])

조건값에 아무것도 넣지 않은 경우, 컴포넌트가 업데이트될 때 실행하지 않는다.

useEffect(()=>{
    let timer = setTimeout(()=>{ setAlert(false) }, 2000)
    return ()=>{ clearTimeout(timer) }
}, [alert])

return 함수를 추가하면, 컴포넌트가 사라질 때 특정 코드를 실행할 수 있다.