리액트

Why React React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 Javascript 라이브러리다. 리액트와 같은 프론트 엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업뎅이트 해준다는 점이다.

SPA:페이지가 1개인 어플리케이션이란 뜻입니다. 전통적인 웹어플리케이션의 구조는, 여러 페이지로 구성이 되어서 유저가 새로운 페이지를 요청 할 때 마다 페이지가 새로고침되고 로딩할 때 마다 서버로부터 리소스를 전달받아 해석 후 렌더링을 하는 방식입니다.

state: 컴포넌트 내부에서 가지고 있는 컴포넌트의 상태값입니다. State는 화면에 보여줄 컴포넌트의 정보(상태)를 지니고 있는 객체입니다.클래스형 컴포넌트에서 state, 즉 해당 컴포넌트의 상태를 정의해보겠습니다.Class component | state클래스형

props는 properties의 줄임말로 컴포넌트의 속성값입니다, 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체로서 props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있습니다.클래스형 컴포넌트

프론트엔드 개발자는 백엔드로부터 API가 나오지 않더라도 mock data, 즉 가짜 데이터를 만들어서 미리 내가 만든 화면에서 데이터가 어떻게 나타나는지 테스트하며 개발을 진행 할 수 있습니다.실제 API에서 받아온 데이터가 아닌 프론트엔드 개발자가 필요에 의해 샘플

프론트엔드로 전환 후 , 빠른 2주를 달리며 개념을 복습할 시간이 부족했는데 오늘은 다행히 개념을 복습할 수 있는 시간이 주어져서 array.map 즉 maping 에 대해서 좀 더 공부하는 시간을 가져보기로 했습니다.Map은 forEach와 마찬가지로 Array의 각

지금까지 배운 React 기초 개념(state, porps, events) 들을 직접 적용하고 응용해보며 내 자신의 약점을 복습해보았다. 이번 과제의 핵심은 주어진 키워드를 활용해 자료를 찾아보면서 적용시켜보는 것이였다. componentDidMount() 메소드를 통

오늘은 1차 프로젝트를 진행하면서 이해하기 제일 어려웠던 props 와 state 를 복습하는 시간을 갖도록 하겠습니다.컴포넌트 내부의 immutable DataJSX 내부에 {this.props.propsName}컴포넌트를 사용할 때, <> 괄호 안에 props

추석 연휴 덕분에 쉬면서 내가 약했던 부분을 그나마 되돌아가서 복습할 수 있는 시간이 생겼다.오늘은 1차 팀 프로젝트를 진행하면서도 제일 어렵다고 느꼈던 Array.map() 그리고 부모,자식 컴포넌트를 활용한 state,props 그리고 마지막으로 filter메소드를

오늘은 사이트에서 자주 사용되는 기능인 Menu Tab에 대해서 복습하는 시간이다. 메뉴 탭이 바뀌는 것에 따라 보여지는 정보도 달라지는 경우가 아주 많다, 그렇다면 이것을 코드로 효율적으로 구현 할려면 어떻게 해야할까?바로 객체에 특정 값을 맵핑하는 테크닉을 통해 좀

Store을 은행으로 비유하고 그리고 스토어 안에는 state라는 실제 정보가 저장이 된다. 하지만 절대로 state에 직접 손을 대는것은 불가능하다. state를 만들 때는 reducer라는 것을 함께 만들어 줘야합니다.render은 UI를 만들어내는 코드들이다. s

오늘은 내가 Brandi 협업을 진행하면서 까다로웠던 Pagination 기능 코드를 어떻게 구현했는지 알아보도록 하겠다.먼저 Pagination을 구현하기 위해 쓴 코드는 아래와 같다.위는 부모 컴포넌트인 TableContainer.js 에서 작성된 코드이다.위는 P

오늘은 브랜디 admin 홈페이지에 존재하는 버튼 중복 선택 기능 코드에 대해서 알아보도록 하겠다.위와 같은 코드를 작성 시 아래와 같은 결과물이 나온다.

오늘은 위와같은 기능을 구현하기 위해 사용한 Datepicker 사용법에 대해서 알아보도록 하겠다.위는 날짜 버튼을 누를 떄 마다 datepicker의 속성 값을 변경해주는 함수의 코드이다. Datepicker가 실행되는 부모 컴포넌트 이기도 하다.위는 datepick

회사에서 프로젝트를 진행하며 중첩필터를 구현하는 과정에서 처음에는 별거 아닌 것처럼 느껴졌지만 프로젝트가 커질수록 실제로 메모리를 많이 잡고, api요청을 중첩해서 보내는 현상이 일어났다.여기서 말하는 중첩 필터란,1\. api요청을 통해 필터의 리스트를 받아온다.2\

리액트 공식 문서에 따르면 고차 컴포넌트는 "컴포넌트 로직을 재사용하기 위한 React의 고급 기술"이라고 표현한다.쉽게 표현하자면 기존 컴포넌트는 props를 받아 UI를 변환하는 역할을 한다면, 고차 컴포넌트 같은 경우에는 컴포넌트를 가져와 새 컴포넌트를 반환하는