본문 바로가기

React14

lifecycle hook, useEffect 컴포넌트의 생명주기(lifecycle) 중간 중간 액션을 넣을 수 있는 기능 가령 onCreate(), onDistroy() 등등의 기능을 임의적으로 넣을 수 있다. 이전 방식(lifecycle hook) class Detail2 extends React.Component { // 가장 많이 쓰는 라이프사이클 훅 componentDidMount() { // 화면에 보일 때 } componentWillUnmount() { // 시야에서 사라질 때 } // 현재 살아있는 라이프사이클 훅 componentDidCatch(error, errorInfo) { // 에러 발생 시 } componentDidUpdate(prevProps, prevState, snapshot) { // 컴포넌트 업데이트 시 } shou.. 2021. 11. 2.
SCSS 일종의 프로그래밍적인 기능을 지원하는 css 전처리기이다. scss 양식으로 작성하고 컴파일 기능을 제공하는 모듈을 이용해 css로 변환해준 뒤 사용되는 구조. 비교를 위한 기존 방식의 CSS .my-alert { background: #ff0000; padding: 20px; border-radius: 10px; max-width: 500px; width: 300px; margin: auto; } .my-alert2 { background: #eeeeee; padding: 20px; border-radius: 10px; max-width: 500px; width: 300px; margin: auto; } div.container div{ background: #00ff00; padding: 20px; .. 2021. 10. 28.
styled-components css-in-js 즉, js파일 안에 css를 설정할 수 있는 컴포넌트라고 보면 된다. 사용법은 아래처럼. App.js import styled from 'styled-components'; let TestComponent = styled.div` font-size : 12px; color : #ff0000; `; let TestComponentWithProps = styled.h4` font-size : 30px; color : ${ props.임의의컬러 }; `; return ( ) yarn add styled-components 명령어로 모듈을 설치하고 import한다. 대문자로 시작하는 변수를 생성하여 TestComponent 처럼 작성하되, 아래 WithPorps처럼 Props문법을 이용하여 공.. 2021. 10. 27.
import, export로 코드 줄이기 변수 및 데이터, 객체 등이 너무 길어질 경우 파일을 따로 구분하여 export하고 사용하고자 하는 파일에서 import Datas.js // export 파일당 default는 하나만 지정 가능하다. export default [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the States", price : 130000 } ] Variables.js var name = 'k.. 2021. 10. 26.
react-bootstrap react-bootstrap : https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io bootstrap : https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 설치명령어 npm install react-bootstrap bootstrap yarn add react-bootscrap bootstrap 특정 스타일을 사용할 때 bootstrap css 파일을 요구할 경우 대비 htt.. 2021. 10. 26.

티스토리툴바