FE BE 개발 메모장/React
React-Hook의 useState와 useEffect
useState() 이전 React에서 상태를 관리할때는 Class 컴포넌트에서 setState를 통해 상태를 구현했었지만, Hook에서는 useState라는 함수를 사용하여 Function 컴포넌트에서도 사용이 가능하다. 기본 문법 let [number, setNumber] = useState(0); let [breath, setBreath] = useState(true); 기본 문법은 비구조화 할당을 사용하 첫번째 요소는 현재 상태, 두번째 요소는 Setter 함수로 동작한다. const setIncrease = () => { setNumber(number + 1); } const setDecrease = () => { setNumber(number - 1); } return ( {number} ) ..
SPA 웹 구성을 위한 React-router-dom
우선 SPA가 무엇인지 간략하게 알아보고 진행하려고한다. SPA(Single Page Application)란? SPA(Single Page Application) 는 말그대로 페이지가 하나인 애플리케이션을 뜻한다. SPA개념등장 이전까지만 해도 웹애플리케이션은 여러 페이지로 구성되었으며, 요청할 때 마다 새로고침이 발생하고 서버로부터 리소스를 받아 렌더링 하는 방식이었다. 서버가 해당하는 html을 주는 방식을 SSR(Server Side Rendering) 이라고한다. 그러나 웹에서 제공하는 정보가 많아지게 되면서 용량이 커져갔고, 모바일의 등장으로 이런 전통적인 방식은 성능상 한계를 맞이하게 되었다. 그래서 이러한 문제를 해결하기 위해 CSR(Client Side Rendering)이라는 방식이 도..
React Hook을 알아보자
리액트 컴포넌트는 클래스 컴포넌트와 함수 컴포넌트로 나뉜다. 기존의 개발 방식은 함수 컴포넌트를 주로 사용하면서 상태를 바꿔줄때나 생명주기(LifeCycle)를 사용해야할 경우만 클래스 컴포넌트롤 사용하는 방식이었다. 하지만 클래스 컴포넌트에선 문제점이 있었는데 다음과 같다. 1. 코드가 길고 복잡해진다. 생명주기, 상태관리를 위해선 constructor, this, bind, componentWillMount 등등... 지켜야할 규칙들이 너무 많기 때문에 코드가 복잡해지고 가독성도 떨어졌다. 아래 예시는 React 공식문서에 나온 예시다. 클래스 컴포넌트에서 작성된 Toggle class Toggle extends React.Component { constructor(props) { super(prop..
생명주기(Life-Cycle) 1차
이전에 Props나 State가 어떻게 전달되고 활용되는지 봤다. 이번엔 생명주기에 대해 알아보려한다. Lifecycle은 우리의 삶처럼 흡사한 개념을 가지고있다. REACT에서 컴포넌트는 생성 => 업데이트 => 제거의 생명주기를 가지고 있다. 공식API 문서에서도 나와 있듯이 자주 사용하는 메소드를 중심적으로 작성하려고 한다. 1. Mounting(생성) 컴포넌트가 생성자(constructor)에 의해 초기화되고, 렌더링 과정을 거쳐 DOM에 최초로 그려지는 단계이다. 실행순서는 다음과 같다. 1. constructor : 생성단계에서 컴포넌트를 초기화 시킨다. constructor(props) 자세히 말하자면 아래의 두가지 목적을 위해 사용한다. 1. this.state에 객체를 할당하여 해당 컴포..
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 이렇게 작성하게 될 경우 반드시 오류를 발생시킨다. 아래는 기본적인 문법이..