react6 React 10. Styled Components Styled Components 컴포넌트 자체 뿐 아니라 컴포넌트의 스타일마저 JS파일에서 정의하는 방식을 CSS-in-JS 라고 하며, styled components는 해당 방식 중 가장 널리 사용되는 라이브러리입니다. Why? SASS는 CSS의 많은 부분을 해결했지만, 아직 해결되지 않는 문제점 또한 존재했습니다. 서비스가 커질수록 scss 파일의 수도 많아지며, scss 클래스명도 많아집니다. 이는 서비스의 구조를 복잡하게 만듭니다. 유지보수 (해당하는 css 태그를 찾아 수정하는 것)가 어려울 수 있습니다. Inline style (HTML 요소에 바로 스타일을 정의하는 것) 방식은 html 파일의 부피가 과도하게 증가하고 CSS 파일과의 역할 분리가 모호해지는 문제가 있습니다. 또한 :hov.. 2020. 10. 11. React 9. Hooks (useState & useEffect) Hooks? Hooks는 리액트 16.8 버젼에 새롭게 추가된 함수로, 함수형 컴포넌트 내에서 state와 여러 lifecycle 기능들을 연동할 수 있게 돕는 메소드입니다. Hook은 일반적인 클래스형 함수에서는 작동하지 않고, 함수형 컴포넌트 내에서 동작하게 되며, react에 기본 탑재된 Hooks는 useState, useEffect, useRef, useReducer가 있으며, 자신만의 Hooks를 만들 수도 있습니다. 왜 사용할까요? 기존의 클래스형 함수로 컴포넌트를 작성할 때, state과 관련된 함수를 컴포넌트 간에 재사용하고 싶은 경우가 많이 생깁니다. Hook은 컴포넌트 트리에 새로운 컴포넌트를 추가하지 않고도 이것을 구현할 수 있게 해줍니다. Hook 사용 규칙 2가지 최상위 레벨에서.. 2020. 10. 4. React 7 - Component Lifecycle 리액트의 컴포넌트는 생명주기 (Life Cycle)를 가진다. Lifecycle API는, 컴포넌트의 생성부터 소멸 사이의 여러 시점에서 호출될 수 있는 다양한 메소드를 말한다. Mounting 관련 메소드 constructor() : 컴포넌트 생성자 함수. 컴포넌트가 새로 만들어질 때마다 호출된다. componentWillMount() : 컴포넌트가 화면에 정의되기 직전에 호출되는 API. 현재는 잘 사용하지 않는다. componentDidMount() : 컴포넌트가 화면에 나타났을 때 호출되는 메소드로, render() 이후에 실행된다. 가장 많이 쓰이는 메소드로 주로 외부 라이브러리 연동, Ajax 나 mock data 요청 등에 사용된다. 요소 render 이후에 데이터를 fetch 하여 stat.. 2020. 9. 26. React 5 - State & 이벤트 React 컴포넌트에서 state과 Props는 컴포넌트가 가지고 있는 정보를 담고 있다는 점에서 매우 중요한 개념입니다. State 현재 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값으로, 화면에 표시되는 함수가 render()라면, 해당 render값에서 어떠한 데이터를 보여줄지에 대한 정보를 가지고 있는 객체입니다. state는 컴포넌트 내에서 정의 및 사용하고, 함수에 의해 변경될 수 있습니다. state 정의 (클래스형 컴포넌트) import React from "react"; class State extends React.Component { constructor() { super(); this.state = { color : 'red'; } } render() { return ( Class.. 2020. 9. 5. React 4 - React Router 리액트의 특징 리액트는 여러 컴포넌트들을 만들지만, 브라우저에 최종 렌더링되는 html문서는 1개인 SPA(Single Page Application) 방식을 지향합니다. 이에, 렌더링되는 한 개의 HTML 문서에서 여러 개의 페이지를 보여주거나 이동시켜주는 Routing기능을 필요로 합니다. Routing 라우팅이란, 정해진 경로명(주소)에 따라 다른 View(페이지)를 보여주는 것을 뜻합니다. 하지만 리액트 자체에는 이러한 라우팅 기능이 내장되어 있지 않아, 외부 라이브러리를 설치하여 적용하여야 합니다. React-router는 리액트의 라우팅 기능 적용을 위해 가장 많이 사용되는 외부 라이브러리입니다. React-router 설치 아래 npm 메시지를 통해 react-router를 설치합니다. np.. 2020. 9. 3. React 1 - react.js 소개 및 개발환경 세팅 React.js? 리액트 JS는 페이스북에서 사용자 UI구축을 위해 제작한 자바스크립트 라이브러리입니다. 특징 리액트는 크게 세가지 특징을 가지고 있습니다. 1. JSX 문법 사용 JSX는 Javascript Syntax Extension의 약자로, 자바스크립트 문법 내에 HTML형태로 정보를 전달하거나 표기할 수 있게하는 기술입니다. 2. Component 기반 기존에 HTML/CSS로 서비스를 제작할 때에는, 서비스의 복잡도에 따라 코드가 굉장히 길어지고 여러번 사용되는 요소 또한 모두 일일이 작성해줘야 했습니다. 리액트에서는 서비스 내에 재사용이 가능한 요소르 컴포넌트 형태로 분리할 수 있어, 개발 과정에서 많은 효율성을 가져다줄 수 있습니다. 3. 가상 DOM 가상 DOM은 추상화된 DOM을 생성.. 2020. 8. 30. 이전 1 다음
