전체 글39 [리액트(React) 학습자를 위한 기초지식] 반복문, 리스트를 위한 Key 설정 리액트(React) 학습에 필요한 기초지식반복문, 리스트를 위한 Key 설정 Key는 웹 브라우저 화면에서 보이지 않는, 그래서 DOM이 그려주는 화면 표시와는 관계없는 요소입니다. 하지만 제대로 된 리액트 컴포넌트를 작성하기 위해 중요한 요소입니다. 리액트는 앞에서 설명한 Props나 State만 컨트롤하여, 실제로 변경이 발생한 표시 요소만 다시 화면에 나타내는 기능이 라이브러리로 준비되어 있습니다. 이때 Key의 역할은 다시 화면을 표시할 때 쓸데없는 동작을 최소화하여 성능 저하를 방지하는데 있습니다. Key를 이해하려면 반복 처리로 리스트를 표시하는 UI를 보면 알기 쉬우므로 리스트 화면 표시를 예로 설명하겠습니다. //배열 형태의 데이터const animal = [ 'Tiger', 'Lion',.. 2020. 2. 9. [리액트(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) 학습자를 위한 기초지식] Props&State - #2 State 리액트(React) 학습에 필요한 사전지식Props&State - #2 state 이전글인 (Props&State - #1 Props)에서 설명한 바에 따르면, Props는 데이터를 전달받는 역할을 합니다. 예제 컴포넌트를 생성해볼게요. LightSwitch.js import React, { Component } from 'react'; class LightSwitch extends Component { constructor(props) { super(props); this.state = { power: false, } } render() { return ( SWITCH {this.state.power ? 'ON' : 'OFF'} ); }} export default LightSwitch; constru.. 2020. 2. 7. [리액트(React) 학습자를 위한 기초지식] Props&State - #1 props 리액트(React) 학습에 필요한 사전지식Props&State - #1 props Props Props의 기본 Props는 컴포넌트의 속성(property)입니다. 컴포넌트를 표시하는 데 필요한 값을 Props라 불리는 것을 통해 전달받을 수 있습니다. 예시를 통해 Props를 살펴볼까요? 아래 예시는 이렇습니다. name이라는 이름으로 컴포넌트 속성을 생성하고, name이라는 컴포넌트 속성에 문자열 'Jake'를 전달해 화면에 표시하도록 하겠습니다. Hello.js import React from 'react'; const Hello = (props) => { return( Hello, My name is {props.name}. );} export default Hello; App.js import .. 2020. 2. 6. 리액트(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 Functional Components) 리액트 함수형 컴포넌트React Functional Components 리액트는 클래스형과 함수형 이 2가지 형식으로 컴포넌트를 만들 수 있습니다. 어떤 형식으로 작성하든 결국 모두 같은 내용을 표시합니다. 하지만 함수형 컴포넌트는 클래스형 컴포넌트보다 비교적 간결하게 기술할 수 있습니다. 그리고 요즘은 클래스형보다 함수형을 더 많이 사용하는 추세입니다. 다음 두 예제는 형태만 다를 뿐 모두 같은 내용을 렌더링합니다. 클래스형(ClassComponent.jsx) import React, { Component } from 'react'; class ClassComponent extends Component{ render(){ return( Hello, world! ); }} export default Cl.. 2020. 2. 4. [리액트(React) 학습자를 위한 기초지식] 템플릿 리터럴, 구조분해 할당 리액트(React) 학습에 필요한 사전지식템플릿 리터럴, 구조분해 할당 템플릿 리터럴 이전의 JavaScript에서는 문자열 연결시 연산자 '+' 등을 사용했습니다. 하지만 ES(ECMAScript)6에서 템플릿 리터럴(Template Literal)이라는 새로운 문자열 표기법을 도입했습니다. 보통 문자열로 값을 대입할 때 큰따옴표("")나 작은따옴표('')를 사용했습니다. 하지만 새로 도입된 템플릿 리터럴에서는 큰따옴표나 작은따옴표 대신 백틱문자(``)를 사용합니다. 백틱문자는 키보드에서 숫자1 왼쪽, tab키 위에 위치하고 있습니다. 기존 큰따옴표와 작은따옴표로 문자열을 작성하는 경우 불편한 점은 크게 2가지가 있었습니다. 먼저는 문자열 내에서 큰따옴표와 작은따옴표를 출력하고 싶은 경우 각 따옴표 앞.. 2020. 2. 3. [리액트(React) 학습자를 위한 기초지식] var, let, const 차이점 - #2 hoisting, 적용범위 리액트(React) 학습에 필요한 사전지식var, let, const 차이점 - #2 Hoisting, 적용범위 Hoisting 먼저 hoisting의 동사격이 되는 hoist의 사전적 의미는 이렇습니다. to lift something heavy, sometimes using ropes or a machine - Cambridge Dictionaryhoist는 "줄과 기계를 이용해 무거운 것을 들어 올린다."는 뜻을 가지고 있습니다. 구글에 hoist라고 검색하면 특정 장비 사진이 나옵니다. 그 장비로 hoist 단어의 이미지를 생각하시면 될 것 같습니다. hoist는 이렇듯 "무언가를 들어 올리다."라는 뜻을 가지고 있습니다. 그렇다면 hoist는 우리가 코딩한 무언가를 올린다는 건데, 도대체 무엇을.. 2020. 2. 2. [리액트(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 4 5 다음
