SCSS

sass가 css를 확장했다면 scss는 sass의 모든 기능과 함께 과거 css의 문법을 가지고 올 수 있게 되었다. npm을 이용해 설치해보자.

yarn add node-sass@4.14.1 open-color sass-loader classnames

scss의 몇가지 특징은 다음과 같다.

• nesting

div{
	p{
    	color : red;
        font : family : hack;
        size : 20px
    }
}

scss는 nesting을 제공한다. 연관 있는 노드를 직관적으로 cascade 할 수 있다.

• 상위 요소에 스타일 적용

div{
	color : blue;
	&:hover {color:red}
    & > p { color : yellow}
}

위의 경우 div 글자색은 파랑색이지만 마우스를 올리면 빨간색이되고 div 안의 p는 노란색이 된다.

• 변수 선언

$a : 20px;
p {
	width : #{a};
}

중복되는 값이나 관리가 필요한 문자열 등을 변수로 선언할 수 있다.

styled components

styled components를 사용하면 스타일을 컴포넌트에 직접 작성하기 때문에 직관적이며 className의 남용을 줄일 수 있다. 다음의 명령으로 설치한다.

yarn add styled-components

적용은 매우 간단하다.

import styled from 'styled-components';

function App() {
  return (
    <div className="App">
      <Sc/>
    </div>
  );
}

const Sc = styled.div`
  padding: 20px;
  border-radius: 15px;
  &:hover{
    background-color: yellow;
  }
`;

export default App;

생명주기

컴포넌트는 생성 -> 수정 -> 삭제의 생명주기를 갖는다. 수정은 다음의 경우에 발생한다.

• props 또는 state의 변경
• 부모 컴포넌트의 업데이트 혹은 리렌더링
• 강제 업데이트(forceUpdate()의 호출)

constructor

생성자 함수로 컴포넌트가 생성될 때 호출된다.

componentDidMount

mount는 컴포넌트가 화면에 표시되는 것을 의미한다. componentDidMount는 이 컴포넌트의 첫번째 렌더링이 완료되었음을 나타낸다.

componentDidUpdate(prevProps, prevState, snapshot)

componentDidMount 가 처음 한번만 실행되는데 반해 componentDidUpdate는 리렌더링이 완료되었을 때마다 호출된다. prevProps와 prevState는 업데이트 되기전의 props와 state를 의미한다.

componentWillUnmount

componentWillUnmount는 돔에 렌더된 컴포넌트가 제거되었을 때 호출된다. 일반적으로 해당 컴포넌트에 등록되어있는 이벤트의 해제를 담당하는 함수로써 사용된다.

Ref

리액트의 컴포넌트를 개별적으로 접근하기 위해서는 React.createRef()를 사용한다.

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      list: ["안녕", "리액트"],
    };
    this.text = React.createRef();
  }

  componentDidMount(){
    console.log(this.text);
  }
  render() {
    
    return (
      <div className="App">
       	<input type="text" ref={this.text}/>
      </div>
    );
  }
}
export default App;

위와 같이 특정 요소인 input을 ref를 통해 제어할 수 있다.

emmet

React에서도 emmet를 사용해 보자.
vscode의 설정(단축키 : ctrl+,)에 들어가서 Include Languages 를 검색하고,
add item을 눌러 Item에 javascript Value에 javascriptreact 를 작성한 뒤 OK를 누른다.

이제 jsx에서도 emmet를 쓸수 있다.

위와 같이 입력 후 Tab 키를 누르면

DOM이 자동 완성되며 기본적인 문법은 다음과 같다.

기호	문법	작성 예	결과
>	자식 요소	div>p	<div><p></p></div>
+	형제 요소	a+p	<a/><p></p>
*	수량 증가	div*2	<div></div><div></div>
^	부모요소	div>h1^p	<div><h1></h1></div><p></p>

vscode-styled-components

styled-components에서도 emmet를 사용할 수 있다.
확장 플러그인에서 를 검색하면 vscode-styled-components를 검색하여 설치하면 emmet 및 ctrl + space의 어시스트 기능을 사용할 수 있고 아래와 같이 백틱 내부의 scss 코드도 강조해준다.