React

모든 사이트에 들어가면 보여지는 것이 UI(User Interface),사용자 편의성을 고려하는 UX(User Experience)가 포함되어 있습니다.애플리케이션의 규모가 커지고 다양한 UI / UX를 구현하기 위해서는 DOM / jQuery로는 코드를 유지보수 하는

변경될 수 있는 데이터를 처리할 때 효율적으로 사용될 수 있습니다.state는 컴포넌트안에서 관리state는 화면에 보여줄 컴포넌트의 정보(상태)를 지니고 있는 객체닙니다.state는 컴포넌트 내에서 정의하고 사용하며 얼마든지 데이터(객체)가 변경될 수 있습니다.클래스

Props는 속성을 나타내며 한 구성 요소에서 다른 요소로 데이터를 전달하는데 사용 (Props : Properties)Props가 있는 데이터가 단방향 흐름으로 전달 된다는 것 입니다.(부모에서 자녀로의 편도)Props를 통해 부모 컴포넌트부터 자식 컴포넌트에게 st

UI를 구현하다 보면 API가 나오기 전에 페이지가 먼저 나오는 경우가 많습니다. 그럴 때를 대비해서 mock data를 활용합니다. mock data로 우리가 만든 화면에서 데이터를 어떻게 나타나는지 테스트를 하며 개발을 진행 할 수 있습니다.mock이란 거짓된, 가

LIFO (Last in First Out)마지막으로 들어온 데이터가 가장 먼저 나갑니다.아이스크림의 콘 위에 쌓이는 것도 스택책들을 쌓아두는 것도 스택FIFO (First In First Out)처음으로 들어온 데이터가 가장 먼저 나갑니다.마트에서 장을 볼 때, 버스

백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답받습니다.이 때 자바스크립트 Web API fetch 함수를 사용합니다.fetch() 화살표 함수 선언식 fetch() 함수 선언식 fetch() 함수에서 default method는 get입니다.

첫 번째 then의 res가 어떤 값이 들어올 때 리턴하는가? console.log를 찍어봅니다.fetch() .then() .then()형태만 있었지만 백앤드에서 응당 body를 안 주는 경우도 많습니다.응답 body로 JSON 데이터를 주지 않는데 프론트에서 Rea

Hook을 이용해서 Class 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.Ryan Florence가 Hook를 사용하여 어텍스트떻게 애플리케이션을 리팩토링 할 것인지 보여주었습니다. !youtubedpw9EHDh2bM함수형 컴포넌트에서는

데이터 가져오기, 구독(subscription) 설정하기, 수동으로 리액트 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 side effects입니다. 리액트의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와

GET: 데이터 조회POST: 데이터 등록PUT: 데이터 수정DELETE: 데이터 제거

spread라는 단어는 퍼뜨리다, 펼치다 라는 의미입니다. 객체 혹은 배열을 펼칠 수 있습니다.위 코드의 핵심은 기존의 것을 던들이지 않고, 새로운 객체를 만든다는 것 입니다. 이러한 상황에서 사용 할 수 있는 문법이 spread입니다.spread 연산자는 배열에서도

액션(Action): 상태를 어떻게 변경시킬지 추상화한 표현힙니다. 단순 객체(Plain object)로 type프로퍼티를 꼭 가지고 있어야 합니다.리듀서(Reducer): 애플리케이션의 다음 상태를 반환하는 함수입니다. 이전 상태와 액션을 받아 처리하고 다음 상태를