분류 전체보기
REACT 데이터의 흐름과 사고
REACT로 사고하기 React의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작하는 특징을 가지고 있다. React API 공식문서에서 등록된 내용으로 어떻게 흘러가는지 자세히 확인해 보려고 한다. 아래의 목업을 디자이너로 부터 받았다고 가정해보자. 가장 먼저 컴포넌트를 어떻게 나누어야 할지 찾는 것이다. 이럴 때는 단일책임원칙으로 하나의 컴포넌트에 한 가지 일을 하는 방법으로 고려를 해본다. 하나의 컴포넌트가 커질 경우 보다 작은 하위 컴포넌트로 분리해줘야한다. 컴포넌트를 쪼개면 아래처럼 나눌 수 있을 것 같다. A (초록색) : 하위 컴포넌트를 담고있는 최상위 컴포넌트이다. B (빨간색) : 모든 유저의 입력(input)을 받는다. C (검은색) : 모든 상품을 보여주거나유저..
State와 Props에 대해서
우선 리액트를 사용할때는 없어선 안되는 필수적인 존재들이 state와 props이다. 리액트에서 데이터를 다룰 때 사용하는 개념이기 때문이다. props React에서 props는 읽기 전용, 즉 변하지 않는 데이터이다. 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 넘겨줄 때 사용한다. 아래의 예제를 살펴보자 import React, { Component } from 'react'; import MyName from './MyName'; function App() { return ( ); } function Hello(props) { return 오늘도 하는 {props.name} } export default App; 우선 App라는 최상위 컴포넌트를 작성해주었다. 그리고 App()안에는 ..
컴포넌트(Component)란?(좀더 이해하기 쉽게 수정해야함)
컴포넌트(Component) 컴포넌트는 개념적으로 props라는 input값을 받고나서, UI, 즉 View(state) 상태에 따른 화면에 어떻게 출력이 되는지 Output을 React Element로 보여주는 함수를 뜻한다. 그래서 합성을 통해 UI를 재사용할 수 있고, 독립적인 단위로 쪼개어 생각할 수 있게 한다. React API 공식문서에 따르면 상속을 따르는 대신 모듈로 따로 분리해 합성을 사용하길 권장한다. 함수 형 컴포넌트와 클래스형 컴포넌트 1. 함수형 컴포넌트 import React from 'react'; function ReactFunc(props) { //...statements } 2. 클래스형 컴포넌트 import React from 'react'; class ReactFunc..
JSX 문법
JSX란? 우선 JSX의 가장 기본적인 변수를 선언해 보았다. const element = Hi, Kim; 변수 element에 문자열도 HTML도 아닌 문법을 담아주었다. 이런 코드를 JSX라고하며, JavaScript를 확장한 문법을 뜻한다. JSX는 자바스크립트의 모든 기능이 포함되어있고, 필수적인것은 아니지만 자바스크립트코드 안에서 UI관련 작업을 할 때 시각적으로 더 도움이 된다고 생각되는 문법이다. JSX문법 JSX의 문법은 다음과 같은 규칙을 가진다 반드시 태그를 열었으면 닫아줘야하며, 하나의 태그안에 담아줘야한다. render() { X render() { O return( return( ); ); } } Error 이렇게 작성하게 될 경우 반드시 오류를 발생시킨다. 아래는 기본적인 문법이..
React, React를 시작하기
React란? 현재까지 프론트엔드에서 쓰이고있는 React는 페이스북이 만든 사용자 UI구축을 위한 JavaScript 라이브러리이다. React 시작하는 방법 만약 node.js가 설치되있지 않다면 설치부터 하고 진행한다. 터미널을 열어 다음과같이 입력하면 설치를 시작한다. npx create-react-app my-app 설치가 끝나게되면 다음과같이 입력해주고 웹페이지를 실행시켜본다. cd my-app npm start 기본(default)로 설정된 브라우저가 뜬다면 가운데에 적힌 문구대로 app.js를 수정해주면 된다. App.js를 보게되면 위의 브라우저에서 보여주는 코드가 작성되었다. 모두 지워주고 0아래 이미지 처럼 작성 후 시작하면된다.
ES-6 문법 정리
1. 변수(variable) const는 블록 범위이며 값이 지정되면 재선언 되거나 바꿀 수 없는 상수이다.(읽기전용) const variable = 'immutable(Constants), Block Scope' variable = "crytek"// Error let은 블록 범위이며 재선언 및 재할당이 가능하다. let variable = 'mutable, Block Scope' variable = 'Infinity Word' //'Infinity Word' 2. 지역 스코프 변수와 함수 for(let idx of arr){ console.log(idx) } for(let idx = 0; i < arr.length; i++){ let x = arr[idx] } x = 5; console.log(x) ..
Node.js 에 대해 자세히 알아보자
Node.js를 처음에 맛보기로만 배웠을 때 단순히 백엔드 개발자에만 맞춰진 런타임이라고 생각했었다. 그러나 Node.js란? 이라는 글을 보고 생각이 조금 바뀌게되었다. 그래서 우선 가장 기본적인 내용만 정리해보려고 한다. Node.js란 무엇일까? Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다. 단순히 이렇게 해석해서는 잘 이해가 되지 않는다. 여기서 런타임이란 프로그래밍 언어가 구동되는 환경을 말하는데, Node.js가 나오기전 까진 크롬, 파이어폭스 같은 브라우저(browser)에서만 동작했다. 그러한 한계를 극복하고 탄생한 것이 바로 Node.js이다. 브라우저 외부 즉 컴퓨터 로컬 내에서도 다양한 용도로 확장하기 위한 JavaScript R..
구조 분해 할당
만약 함수에 객체나 배열을 전달해야하는 경우가 생기거나, 객체나 배열에 저장된 데이터의 일부만 필요한 경우가 생길 때에 어떤 문법을 사용해야 효과적일지 고민이라면 '구조 분해 할당' 이라는 것을 한번 알아보자 배열 분해 let ramen = ["Jin Ramen", "Shin Ramen"] //구조 분해 할당을 이용해 Aline에는 ramen[0]을 //Bline에는 ramen[1]을 할당했다. let [lineA, lineB] = ramen; console.log(lineA); // Jin Ramen console.log(lineB); // Shin Ramen spread Syntax로 나머지 요소 가져오기 배열 앞쪽에 위치한 값 몇개만 필요하고, 나머지는 한곳에 모아서 저장하고 싶다면, '...' 을..