React(리액트)

웹에 전반적인 이론들도 따로 정리할 예정이지만 Spring을 기반으로 백을 배우다 보니 Front에 대한 욕심이 생겼다. 형형색색 날라다니고 그래프있고...... 아직은 배우는 단계라 정확한 정의를 내릴 순 없지만 SPA같은 개념의 매 페이지의 리로딩과 같은 서버의 부

JavaScript를 사용하여 HTML로 구성한 UI를 제어해보았다면 DOM을 변형시키기 위해선 DOM Selector API를 사용해서 특정 DOM을 선택한 뒤, 특정 이벤트가 발생하면 변화를 주었다.그러나 사용자와의 인터랙션이 별로 없는 웹페이지라면 상관없겠지만,

props는 properties의 줄입말 입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할때, props를 사용합니다.예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때 name이라는 값을 전달해주고 싶다면? 아래와 같이 작성합니다.App.jsHe

조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미합니다.예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때, isSpecila이라는 props를 설정하보겠습니다.App.jstrue 는 자바스크립트 값이기 때문에 중괄호로 감싸주어

만약 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현할 수 있는지에 대하여 알아보겠습니다.리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었는데요, 리액트 16.8 에서 Hooks라는 기능이 도입되면서 함수

이번에는 리액트에서 사용자가 입력 할 수 있는 input 태그의 상태를 관리하는 방법을 알아보겠습니다.InputSample.js이번에도, useState를 사용합니다. 이번에는 input의 onChange라는 이벤트를 사용하여 이벤트 객체 e를 파라미터로 받아와서 사용

JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해햐 하는 상황에 getElementById.querySelector 같은 DOM Selector 함수를 사용해서 DOM을 선택합니다.리액트를 사용하는 프로젝트 에서도 가끔씩 DOM을 직접 선택해야 하

이번에는 배열에 새로운 항목을 추가하는 방법을 알아보겠습니다.우선, input 두개와 button 하나로 이루어진 CreateUser.js 라는 컴포넌트를 src 디렉터리에 만들어봅시다.CreateUser.jsApp.js이제 배열에 변화를 줄 차례입니다. 배열에 변화를

Hook은 React 16.8에 새로 추가된 기능입니다.Hook은 함수형 컴포넌트에서 State와 생명주기(LifeCycle)를 연동(hooking)한 함수입니다.Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해주는 기능

일반적인 비동기를 알아보기 위한 간단한 코드입니다.비동기 예시만약 1초의 간격을 두고 표현해 주고싶다고 아래와 같은 코드를 작성하였을 경우 비동기 상황에선 거의 동시게 시간이 찍히게 됩니다.그래서 그 다음으로 가장 쉽게 생각한 부분이 콜백함수 안에 또 콜백, 그 안에

SPA 방식에서는 오직 하나의 페이지만 가지고 있기 때문에 MPA 방식으로의 페이지 이동이 불가능합니다. 페이지 (html)가 아닌 데이터를 가지는 JS 파일로 구성이 되어 있기 때문입니다.React-Router는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따

리덕스란, 자바스크립트 애플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 도구입니다. 복잡한 상태 관리가 이루어지는 SPA(Single Page Application)에서 특히 유용하게 사용됩니다. 물론, 리덕스는 리액트 뿐만 아니라 jQuery, Angula

리덕스는 아래와 같은 흐름으로 상태를 관리하고 동작합니다.그렇다면, 리덕스 미들웨어가 어떻게 동작하는지 흐름을 먼저 그림을 통해 보도록 하겠습니다.기존의 리덕스는 액션이 발생하게 되면, 디스패치를 통해 스토에에게 상태 변화의 필요성을 알리게 됩니다. 하지만, 디스패치된