리액트 스터디 2
SCSS
sass가 css를 확장했다면 scss는 sass의 모든 기능과 함께 과거 css의 문법을 가지고 올 수 있게 되었다. npm을 이용해 설치해보자.
yarn add [email protected] 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 코드도 강조해준다.
Author And Source
이 문제에 관하여(리액트 스터디 2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@likerdo/리액트-스터디-2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)