Java Script/React
-
React) styled-componentJava Script/React 2020. 11. 4. 00:27
styled-components props 값으로 전달 값을 스타일에 입힐 수 있음 import React from 'react'; import styled, { css } from 'styled-components'; const Box = styled.div` /* props로 넣어준 값을 직접 전달해줄 수 있음 */ background: ${props => props.color || "blue"}; padding: 1rem; display: flex; `; const Button = styled.button` background: white; color: black; border-radius: 4px; padding: 0.5rem; display: flex; align-i..
-
React) useMemo & useCallbackJava Script/React 2020. 11. 4. 00:23
useMemo 함수형 컴포넌트 내부에서 발생하는 연산 최적화에 사용 useMemo를 이용해서 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하도록 설정 의존성이 변경되었을 때만(배열로 전달한 값이 변경되었을 때만) 메모이제이션된 값만 다시 계산해준다. (반환한다) const colorMemo = useMemo(() => getColor(color), [color]); const movieGenreMemo = useMemo(() => getMovieGenre(movie), [movie]) ; 이 경우는, color값이 변경되면 getColor 함수만, movie값이 변경되면 getMovie함수만 호출된다. useCallback 렌더링 성능을 최적화 해야하는 상황에서 사용 ~> 이벤트 핸들러 함수를..
-
React Hooks 알아보기Java Script/React 2020. 11. 4. 00:20
Hooks React v16.8에 새로 도입된 기능 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 도움 리액트 매뉴얼에 따르면, 기존의 클래스형 컴포넌트는 앞으로도 계속해서 지원될 예정 하지만, 함수형 컴포넌트와 Hooks 사용 권장 ~> 첫번째 옵션으로 염두하기(미션 요구사항과 부합) 종류 useState, useEffect, useReducer, useMemo, useCallback, useRef, customHook useState : 컴포넌트에서 가변적인 상태를 핸들링하도록 돕는 Hook useReducer : 다양한 컴포넌트 상황에 따라 다양한 상..
-
React 컴포넌트 알아보기Java Script/React 2020. 11. 4. 00:05
컴포넌트 컴포넌트의 기능은 단순한 템플릿 이상 함수형 컴포넌트, 클래스형 컴포넌트 클래스형 컴포넌트 import React, { Component } from 'react'; class App extends Component { render() { const name = 'react'; return {name}; } } export default App; 장점 state 기능 및 라이프사이클 기능을 사용할 수 있음 임의 메서드를 정의할 수 있음 함수형 컴포넌트 const MyComponent = () => { const name = 'zin0'; return ( {/* 주석 맞지? */} 반갑다 {name} ); } export default MyComponent; 장점 컴포넌트 선언이 훨씬 편함 메모리..
-
JSX란 무엇인가Java Script/React 2020. 11. 3. 23:58
JSX 프로젝트에서 컴포넌트를 렌더링하면, 함수에서 반환하는 내용을 나타냄. 함수 반환 값을 보면, HTML을 작성한 것 같지만, HTML도 아니고 문자열 템플릿도 아닌 JSX라고 부름 자바스크립트의 확장 문법, XML과 유사하게 생김 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JS 형태로 변환됨 가독성이 좋고 작성하기 쉽다는 장점이 있음 또한, component를 다른 component 안에 작성할 수 있음.(customize 가능) 주의사항 Component를 개발할 때는, DOM 트리 구조를 생각해야하기 때문에, 반드시 부모 태그(div, container, section 등)로 감싸서 return해야한다. 의미없는 div 대신 Fragment로 감싸서 이용할 수 있다. JS 문법을 이용할 수..