융융이'Blog

yarn add styled-components 컴포넌트 스타일링하는 데 제일 각광받고 있는 패키지 styled-components가 있다. import React from "react"; import styled from "styled-components"; import PropTypes from "prop-types"; const Container = styled.button` width: 100%; border: 0; border-radius: ${props => props.theme.borderRadius}; color: white; font-weight: 600; background-color: ${props => props.theme.blueColor}; text-align: center; p..

언제 함수형 컴포넌트를 사용해야 할까? 함수형 컴포넌트는 컴포넌트에서 라이프사이클, state 등 불필요한 기능을 제거한 상태이기 때문에 메모리 소모량은 일반 클래스형 컴포넌트보다 적습니다. 리액트 v16이상에서는 함수형 컴포넌트 성능이 클래스형 컴포넌트보다 조금 더 빠릅니다. 그래서 state나 라이프사이클 API를 꼭 써야 할 때만 클래스형태로 변환하여 컴포넌트를 작성하면 됩니다. import React from 'react'; function Hello(props){ return( Hello {props.name} ) } export default Hello; import React from 'react'; const Hello = ({name}) =>{ return (..

리액트의 라이플 사이클은 총 세가지 마운드, 업데이트, 언마운트 입니다. 라이플 사이클에서 주로 사용되는 함수들 render()함수 이 메서드는 컴포넌트 모양새를 정의합니다. 이 메서드 안에서 this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환합니다. 이 메서드 안에서 절대로 state를 변형해서는 안되며, 웹브라우저에 접근해서도 안됩니다. DOM 정보를 가져오거나 변환를 줄 때느 componentDidMount에서 처리 해야합니다. constructor 메서드 constructor(props){...} 이것은 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행됩니다. 이 메서드에서는 초기 state를 정할 수 있습니다. ##componentDidMount메서드 이..

import React, {Component} from 'react'; class IterationSample extends Component{ render(){ const names = ['123', '345','567'] const nameList = names.map( (name, index) => ({name}) ) return ( {nameList} ) } } export default IterationSample; react에서는 배열을 나열할 때는 반드시 고유key를 정해줘야한다. 보통 key 값으로 index를 자주 사용한다.

REACT에서 지원하는 이벤트 종류 Clipboard Composition Keyboard Focus Form Mouse Selection Touch UI Image Wheel Animation Media Transition import React, {Component} from 'react'; class EventPractice extends Component { state = { message: "" } constructor(props){ super(props); this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); } //값이 변화할 때 handleChange(e)..

구조가 MVC, MVW등인 프레임워크와 달리, 오직 V만 신경 쓰는 라이브러리입니다. DOM이란? Document Object Model의 약어입니다. 객체로 문서 구조를 표현하는 방법은 XML이나 HTML로 작성합니다. Virtual Dom 데이터를 업데이트하면 전체 UI를 Virtual Dom에 리렌더링합니다. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교합니다. 바뀐 부분만 실제 DOM에 적용합니다.