JavaScript UI Library상태값이 변경될 때마다 UI를 자동으로 업데이트해주는 JS 라이브러리이를 위해 "가상DOM 을 통해 변경된 부분만 효율적으로 업데이트" 해주는 구조를 채택함.리액트는 컴포넌트의 1) 상태값이 변경되면, 2) UI를 자동 업데이트 해

WIZ-zee-wig(위즈윅)'으로 발음하며 'what you see is what you get'을 줄여 부른 말이다. WISIWYG는 사용자가 보는 것이 그대로 최종 산물에 나타나도록 하는 유저 인터페이스를 말한다. WISIWYG 어플리케이션에서는 사용자가 화면에서

리액트와 불변성의 연관 관계는 리액트가 지향하는 함수형 프로그래밍의 특징에서 발견할 수 있음. 함수형 프로그램밍의 특징 중 하나가 순수함수를 사용하는 것인데, 여기서 순수함수란 동일한 매개변수를 넣었을 때 동일한 리턴값을 출력하는 함수. 동시에 순수함수는 외부의 값을

마운트/언마운트컴포넌트가 마운트 됐을 때 (처음 나타났을 때), 언마운트 됐을 때 (사라질 때)useEffect 를 사용 할 때에는 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어있는 배열 (deps)을 넣음. 만약에 deps 배열을 비우게 된다면, 컴포넌

페이스북에서 관리하는 draft.js 에디터를 리액트용으로 만든 것.장점문서가 잘 되있음.막히는 부분은 개발 커뮤니티 통해 해결 가능단점한글 입력 시 바로바로 onChange가 되지 않아 글자를 작성하고 바로 shift + enter키를 입력할 때 상태값이 변하지 않아

react-router에서 화면을 이동할 때는 Link 태그를 사용하여 to 속성에 이동할 주소 정보를 작성.페이지 이동 기능을 갖고 있는 태그인 a 태그가 있음.Link 태그는 브라우저의 주소만 바꿀 뿐 페이지 자체를 새로고침하지는 않음.반면, a 태그는 브라우저의

oneButton 정렬 sortedUsersData 함수가 호출 될 때 마다 백엔드로 nicknameascending, nicknamedescending 등으로 값이 바뀌면서 넘어감. 컴포넌트 재 사용 메뉴바와 컴포넌트 재사용을 복합적으로 적용 처음 curren

화면을 구성하는 요소들을 다음과 같이 나누어 볼 수 있습니다두 레이아웃에서 반복적으로 사용되는 요소와 변화되는 요소들이 보이시나요?!변화하는 부분들이 있다고 하더라도 매번 다른 코드로 처리할 필요 없이 컴포넌트화 하여 사용할 수 있습니다.위와 같이 Props를 통해 각

MenuTab.jsMenuTab.scssFirst.jsSecond.jsThird.js

백엔드에서 가지고 있는 데이터는 많고, 그 데이터를 한 화면에 전부 보여줄 수 없는 경우에 사용됨. 모든 데이터를 한번에 보여줄 수 없다면 일정 길이로 끊어서 전달해야 함.흔히 게시판의 "이전/다음 페이지"를 끊어 보여주는 기능으로 익숙함. 많은 웹사이트에서 널리 사용

다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것.사용자가 웹 애플리케이션과 상호 작용하는 방식을 획기적으로 바꾼 기술.사용자가 다른 뷰로 이동할 때 애플리케이션은 뷰를 동적으로 다시 그림. MPA(Multi Page Application) 대비 페이

Task 1. API 호출파일: Monsters.js아래 키워드들을 활용해 데이터를 호출 한 후, state에 저장 해주세요!useEffect()fetch() → 호출할 API 주소:https://jsonplaceholder.typicode.com/usersu

사이드 이펙트를 제거실행 시점컴포넌트가 사라졌을 떄 (ex> 다른 페이지로 이동 했을 때 Login → Main)새로운 콜백함수가 실행되기 직전 → 실행돼서 원래 함수를 제거.최초 렌더링 된 후 한번 만 실행문제점다른 페이지로 넘어갔는데 console.log가 계속 찍

side Effect들을 함수의 body 자리(render)에서 실행시키면 안됨.함수 컴포넌트의 리턴 값은 UI 요소, state, props의 변화가 있을 때마다 함수가 실행됨. 이 말은 매 렌더링 때마다 함수 body에 있는 로직이 실행된다는 뜻.또한 렌더링과 무관

함수가 어떤 동작을 할 때, input - output 이외의 다른 값을 조작한다면, 이 함수에는 Side Effect(부수 효과) 가 있다고 표현함수 컴포넌트의 Input이 state, props이고, output이 UI라고 설명함. 함수 컴포넌트 Side Effec

조건의 true / false 에 따라 각기 다른 UI 를 렌더링 할 때 사용조건이 true 일때만 특정 UI 를 렌더링 하고 false 일때는 아무것도 렌더링 하지 않도록 할 때 사용변수가 숫자 타입인 경우 0은 false변수가 문자열 타입인 경우 빈 문자열“”도 f

가짜 데이터, 샘플 데이터, 실제 API 에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플로 만들어 본 데이터프론트엔드 개발을 진행하려하는데 필요한 백엔드 API가 완성이 안되었을수도 있음.백엔드에서 API가 완성될때까지 무작정 기다리는 게 아니라 , m

UI 구성에 필요하지만 동적으로 변하지 않아서 백엔드 API등을 통해서 가져올 필요가 없는 정적인 데이터상수 데이터는 별도의 JS 파일로 분리하거나, 필요한 파일 내부에서 선언해서 사용할 수 있음변수가 명백히 변하지 않는 상수 데이터라는 것을 표시해주기 위해서 대문자

React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 함.Key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자

최상위(at the top level)에서만 Hook을 호출함수 컴포넌트 내에서만 사용. 함수 안에서는 hooks호출 불가Hook을 호출할 수 있는 곳이 딱 한 군데 더 있음. 바로 직접 작성한 custom Hook 내에서만장점hooks로 인해 클래스 컴포넌트 함수 컴