React20 React Fragments React Fragments 리액트 v16.2부터 'Fragments' 기능을 지원합니다. 렌더링을 할 때 단일 요소만 다룰 수 있음로 불필요한 DOM을 삽입하는 경우가 많았습니다. 그러나 Fragments를 사용하면 여러 개의 요소를 직접 화면에 표시할 수 있습니다. React.Fragment로 감싼 부분은 DOM은 출력하지 않고 자식 요소만 렌더링합니다. 그럼 코드를 볼까요. 먼저 Fragment를 적용하지 않은 것을 작성하고, Fragment를 적용한 것을 작성하여 비교해보도록 하겠습니다. Fragment 적용하지 않은 컴포넌트 import React from 'react'; const Hello = () => { return ( Hello World ! );}; export default Hell.. 2020. 2. 24. 아토믹 디자인(Atomic Design) 아토믹 디자인(Atomic Design) 아토믹 디자인을 설명하기에 앞서... 구글(Google)이 '머터리얼 디자인(Material Design)'이라 불리는 디자인 가이드라인을 공개한 이후, 디자인을 언어화하여 그 법칙성을 시스템으로 운용하는 접근법이 웹 개발에 널리 퍼지게 되었습니다. 물론 이전에도 인터페이스를 패턴으로 다루는 방법과 관련한 많은 해설서가 있었습니다. 심지어 1970년대에도 넓은 의미의 디자인 영역 관련 서적은 있었습니다. 따라서 웹 사이트 제작에서도 '컴포넌트' 단위가 중요해졌으며, 이 때문에 리액트의 특징 중 하나인 '컴포넌트 기반(Component-Based)'에도 반영되었습니다. 이러한 흐름 가운데 웹 디자이너 브래드 프로스트(Brad Frost)는 '아토믹 디자인'을 주장했.. 2020. 2. 21. [리액트(React) 학습자를 위한 기초지식] 컴포넌트 생명주기(Lifecycle of Components) - #3 Unmounting (3/3) 리액트(React) 학습자를 위한 기초지식컴포넌트 생명주기(Lifecycle of Components) - #3 Unmounting (출처: https://twitter.com/dan_abramov/status/981712092611989509) Unmounting 리액트 컴포넌트 생명주기의 마지막 단계인 Unmounting입니다. Unmounting은 컴포넌트를 DOM에서 제거할 때 발생합니다. 이 Unmounting 단계에서 호출되는 함수는 단 하나 입니다, componentWillUnmount() componentWillUnmount componentWillUnmount() 함수는 DOM에서 컴포넌트를 제거하려 할 때 호출됩니다. 컴포넌트를 제거할거면 그냥 컴포넌트 파일을 지우면 안되나 생각했지만,.. 2020. 2. 20. [리액트(React) 학습자를 위한 기초지식] 컴포넌트 생명주기(Lifecycle of Components) - #2 Updating (2/3) 리액트(React) 학습자를 위한 기초지식컴포넌트 생명주기(Lifecycle of Components) - #2 Updating (2/3) (출처: https://twitter.com/dan_abramov/status/981712092611989509) Updating 리액트 컴포넌트 생명주기의 첫번째 단계인 Mounting 단계를 거치면 Updating 단계로 들어갑니다. Updating은 Mounting과정을 거쳐 DOM을 형성한 컴포넌트에 state값이나 props값을 변경할 때 발생합니다. 지난글인 [컴포넌트 생명주기 - #1 Mounting]에서 예시로 적어둔 것 처럼, componentDidMount() 함수를 이용해 state값을 변경했습니다. 이미 DOM을 형성한 컴포넌트에 state값을 .. 2020. 2. 19. [리액트(React) 학습자를 위한 기초지식] 컴포넌트 생명주기(Lifecycle of Components) - #1 Mounting (1/3) 리액트(React) 학습자를 위한 기초지식컴포넌트 생명주기(Lifecycle of Components) - #1 Mounting (1/3) 리액트 컴포넌트에는 생명주기가 있습니다. 컴포넌트의 생명주기라 함은 컴포넌트가 처음으로 import되어 DOM을 형성하는 단계, 형성된 컴포넌트 내부를 수정하는 단계, 마지막으로 컴포넌트를 사용하지 않겠다고 선언하는 단계로 말 그대로 컴포넌트가 탄생하여 소멸되기까지 일련의 과정입니다. 이러한 생명주기 안에서는 특정 시점에서 자동으로 호출되는 생명주기와 관련된 함수들이 있습니다. 그리고 컴포넌트가 실행될 때, 이 함수들은 정해진 순서에 따라 실행이 됩니다. 이를 통해 리액트 컴포넌트를 보다 더 심층적으로 다룰 수 있습니다. 생명주기는 크게 3단계로 나누어집니다. Mou.. 2020. 2. 10. [리액트(React) 학습자를 위한 기초지식] Props&State - #3 State로 이벤트 작성 리액트(React) 학습에 필요한 사전지식Props&State - #3 state로 이벤트 작성 이벤트는 사용자가 웹 브라우저에서 어떠한 동작이나 행동을 하는 것을 의미합니다. 예를 들면 스크롤을 움직이거나, 마우스 포인터를 움직이거나, 버튼을 누르는 동작이 있습니다. 리액트에서는 JSX로 이벤트를 비교적 쉽게 구현할 수 있습니다. 이벤트를 구현하고 싶은 태그에 on*** 형식으로 원하는 이벤트를 작성하면 됩니다. on 다음에 나오는 이벤트명 첫 스펠링은 대문자로 해주어야 합니다. 간단하게 이벤트 코드를 작성하겠습니다. SampleButton.js import React, { Component } from 'react'; class SampleButton extends Component { handleC.. 2020. 2. 8. 리액트(React) JSX 리액트(React) JSX 먼저 리액트 공식홈페이지에서 JSX를 어떻게 소개하고있는지 살펴봅시다. const element = Hello, world!; 위의 희한한 태그 문법은 문자열도, HTML도 아닙니다. JSX라 하며 JavaScript를 확장한 문법입니다. UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용할 것을 권장합니다. JSX라고 하면 템플릿 언어가 떠오를 수도 있지만, JavaScript의 모든 기능이 포함되어 있습니다. (이후 생략...) 리액트로 기술한 소스 코드를 보면, HTML과 비슷한 부분이 있지만 뭔가 조금 다른 부분도 있다는 걸 확인하셨을 겁니다. JSX는 리액트와 마찬가지로 페이스북에서 개발한 확장 구문입니다(http://facebook.github.io/j.. 2020. 2. 5. [리액트(React) 학습자를 위한 기초지식] 템플릿 리터럴, 구조분해 할당 리액트(React) 학습에 필요한 사전지식템플릿 리터럴, 구조분해 할당 템플릿 리터럴 이전의 JavaScript에서는 문자열 연결시 연산자 '+' 등을 사용했습니다. 하지만 ES(ECMAScript)6에서 템플릿 리터럴(Template Literal)이라는 새로운 문자열 표기법을 도입했습니다. 보통 문자열로 값을 대입할 때 큰따옴표("")나 작은따옴표('')를 사용했습니다. 하지만 새로 도입된 템플릿 리터럴에서는 큰따옴표나 작은따옴표 대신 백틱문자(``)를 사용합니다. 백틱문자는 키보드에서 숫자1 왼쪽, tab키 위에 위치하고 있습니다. 기존 큰따옴표와 작은따옴표로 문자열을 작성하는 경우 불편한 점은 크게 2가지가 있었습니다. 먼저는 문자열 내에서 큰따옴표와 작은따옴표를 출력하고 싶은 경우 각 따옴표 앞.. 2020. 2. 3. [리액트(React) 학습자를 위한 기초지식] var, let, const 차이점 - #1 재선언, 재할당 리액트(React) 학습에 필요한 사전지식var, let, const 차이점 - #1 재선언, 재할당 JavaScript에서 변수를 정의할 때 'var'를 많이 사용했습니다. 하지만 var는 생각보다 단점이 많습니다. 동일한 이름으로 변수를 한 번 더 선언을 하더라도 에러가 나지 않고 각자 다른 값을 출력합니다. 변수 선언이 유연하기에 코딩을 간단하게 할 때는 편리할 수 있습니다. 하지만 코딩의 규모가 크다면 예상했던 값이 나오지 않을 수 있고, 변수가 어떻게 사용되는지 혼란을 가져올 수 있습니다. 그래서 ES6 이후에 새롭게 'let'과 'const'라는 2종류의 정의방법이 추가되었습니다. 각 방법에 따라 동작이 다르므로 용도에 따라 구분하여 사용해야 합니다. 기존 var를 개선한 점에서 let과 co.. 2020. 2. 1. 이전 1 2 3 다음
