Zin0's 개발 기록 공간 Zin0's 개발 기록 공간

리액트를 다루는 기술

• React) styled-component

  Java 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..

  Read More
• 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 : 다양한 컴포넌트 상황에 따라 다양한 상..

  Read More
• 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; 장점 컴포넌트 선언이 훨씬 편함 메모리..

  Read More
• 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 문법을 이용할 수..

  Read More