React

이번 포스팅에서는 React가 무엇인지, 탄생 배경과 특징 그리고 정의를 구분지어 간단하게 정리해보려고 한다. 리액트(react.js)란 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수

자바스크립트의 내장 함수인 map을 이용하여 동적인 배열을 렌더링 하기!(예시를 위해 댓글 기능을 구현하겠슴미다)(포스팅 보기 -> 배열 고차 함수 - (2) forEach / map / filter)map함수는 자바스크립트의 배열 객체의 내장 함수이다. 파라미터로 전

리액트에서는 배열을 렌더링 했을 때 key값을 통해 배열의 어떤 원소에 변화가 있었는지를 알아낸다.key가 없을 때는 가상 DOM을 비교하는 과정에서 리스트를 순차적으로 비교하며 변화를 감지하지만 key값이 이때면 key를 사용하여 어떤 변화가 있었는지 보다 빠르게 알

구조 분해 할당 문법은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. (출처: MDN)쉽게 말해 배열이나 객체를 쪼개어 필드 값을 변수에 담을 수 있다. 아래의 예제를 살펴보자.선언이 분리 되어도 구조 분

SPA는 Single Page Application의 약자이다. 즉 페이지가 한 개인 어플리케이션 이라는 의미를 지닌다. 보통 전통적인 웹어플리케이션에서는 페이지를 구성할 때 페이지 수 만큼html 파일이 존재한다. 페이지를 로딩할 때 마다 서버로부터 리소스를 전달받아

로그인 페이지를 만드는 중 구현하기로 한 필수사항 중 인풋창을 클릭했을 때 밑줄 색이 바뀌고 인풋 바깥인 메인페이지를 다시 클릭했을 때 원래 색상으로 돌아오게 하는 기능이 있었다. 인풋창을 클릭할때마다 이벤트가 발생하는 토글 기능이 아닌 활성화된 기능을 다시 해제시켜야

리액트를 사용해 회원가입 페이지 레이아웃 및 유효성 검사 기능을 구현하였다. 버튼이 활성화 되기 위한 조건은 아래와 같다.1) 모든 input창의 입력값이 1자 이상이 될 것.2) 이메일(ID)은 '@' 와 '.' 두개를 모두 포함할 것.3) 비밀번호는 특수문자 1자이

상수데이터란 변하지 않는 값, 정적인 데이터를 뜻한다. 조금 더 풀어서 설명하자면 화면 구성에는 필요하지만 변하지 않기 때문에 백엔드 API를 통해서 가져오지 않아도 되는 데이터들은 상수 데이터로 따로 관리하면 보다 더 효율적으로 사용할 수 있다.반복되는 데이터들을 하

useState를 이용하여 체크박스 및 카테고리 선택 기능 구현하기!체크박스 구현하여 카테고리 리스트 만들기체크박스 선택시 리스트에 해당 카테고리 추가(중복 선택 가능)체크박스 지정 해제 시 카테고리 리스트에서 해당 카테고리 삭제카테고리 지정이 아무것도 안되어 있을 경

드롭다운 메뉴 만들기! 메뉴 선택시 상품코드 출력드롭다운 구현하여 상품목록 만들기상품선택시 상품코드 화면에 출력체크박스 리스팅을 위해 상수데이터 만들기(카테고리 목록은 임의로 작성하였습니다.)map함수를 이용하여 렌더링 해준다상수데이터는 렌더될때마다 불러질 필요없이 한

Hook은 React 버전 16.8부터 React요소로 새로 추가되었습니다. Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 가능을 사용할 수 있습니다. - React 공식문서리액트의 컴포넌트는 클래스형과 함수형으로 나눠

state: 상태state란 화면에 나타날 컴포넌트의 UI상태이다. 컴포넌트 내에서 상태값이 정해지며 함수를 통해 값의 업데이트가 얼마든지 가능하다. 과거 함수형 컴포넌트를 사용하던 중 state를 추가하고 싶을 때 클래스 컴포넌트를 사용하곤 했다. hook등장한 이후

useEffect는 리액트 훅의 하나로 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 해준다. 여기서 렌더링이란 state와 props를 기반으로 UI를 그려내는 행위이다.형태:useEffect(함수, 타이밍)함수: 렌더링이 끝난 후 실행시킬 로직타

1. Custom Hook이란? 커스텀 훅은 개발자가 직접 만든 hook이다. 반복되는 로직을 묶어 하나의 컴포넌트로 만들듯이 반복되는 메서드를 하나로 묶어 사용한다. 보통 Input과 Fetch를 관리할 때 자주 쓰인다. 2. Custom Hook, 왜 사용할까?