React

사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JS라이브러리 이다.컴포넌트(Component)라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다.SPA를 전제로 하고 있고, 가상돔을 활용하여 업데이트해야하는 돔요소를 찾아서

화살표 함수객체와 배열 구조분해 할당함수 인자에서 구조분해 할당Spread Operator(전개 구문)Rest Operator(나머지 매개변수 구문)map, filter 메소드자바스크립트에서 기본적으로 함수를 만드는 방법은 2가지가 있다.function 키워드 를 사용

오늘은 간단하게 컴포넌트, JSX가 무엇인지, 그리고 어떻게 사용하는지에 대한 사용법에 대해서 공부했습니다.컴포넌트를 간략하게 설명하자면 화면을 구성하는 하나의 단위라고 할 수 있다.예를들면, 검색 컴포넌트, 로그인 컴포넌트,상품리스트 컴포넌트, 추천 상품 컴포넌트 등

오늘은 props, children에 대해서 간단히 정리 해보려고 한다.부모 컴포넌트로부터 받아온 데이터부모에서 자식으로만 전달이 가능하다props 예시위에 코드와 같이 props를 여러번 전달을 할때에도 중간에있는 컴포넌트도 최하단에 있는 자식 컴포넌트의 부모이기 때

state란 컴포넌트 내부에서 바뀔 수 있는 값을 말한다.그리고 우리는 useState라는 Hook함수를 통해 이 state의 상태를 변경해줄 수 있다.위 코드처럼 통상 react에서는 구조분해할당 문법을 통해 useState를 선언하고 사용한다.그럼 state의 값을

기존에 우리가 사용하던 방식함수형 업데이트 방식위와 같이 setState안에 수정할 값이 아닌, 함수를 넣을 수 있다. 그리고 함수의 인자에서는 현재의 state를 가져올 수 있고, {}안에서는 이 값을 변경하는 코드를 작성할 수 있다.두 방식의 차이점을 예제로 들면왜

리액트 컴포넌트가 렌더링 될때마다 특정작업을 수행하도록 설정할 수 있는 Hook함수이다.정리하면, 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면, 또는 어떤 컴폰너트갛 ㅘ면에서 사라졌을 때 무언가를 실행하고 싶다면 useEffect를 사용한다.실행하

컴포넌트에서 컴포넌트로 state를 보내기 위해서는 원래 반드시 props로 전달을 해야 하기 때문에, 부모 관계가 되어야 했다.조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할 때도 반드시 부모컴포넌트를 거쳐야만 한다. 즉 부모컴포넌트는 해당 값이 필요가 없어도

우리가 redux를 사용하는 이유는 부모컴포넌트에서 자식컴포넌트로 prop를 내려주는 방식으로 state값을 수정하는 것에 대한 불편함이 있어 사용을 하니까, state를 redux로 수정하는 방법에 대해 알아야 한다.counter를 예시를 들어서 store 값을 변경

라이프사이클?생명주기를 말하고, 컴포넌트가 렌더링을 준비하는 시점부터, 페이지에서 사라질때(unmount)까지의 사이클을 말한다.라이프사이클에는 9가지 단계가 있는데, 크게는 3가지로 나눈다.Mount : 컴포넌트가 생성되고, 브라우저에 처음 나타났을 때Update :

node.js 와 브라우저를 위한 Promise 기반 http 클라이언트이다.다시말해 http를 이용해 서버와 통신하기 위해 사용하는 패키지이다.API서버는 FE에서 만드는 json-server를 사용한다.필자는 로컬환경에서 실행할 것 이기에, 프로젝트 내의 3001번

이번 실전 프로젝트 기간 중 맡은 부분의 일부가 카카오 로그인 파트였다.저번에 미니프로젝트때 시도했었는데, 3일동안 머리를박았지만 실패해서 솔직히 시도하기 겁이좀 났다.하지만 이번엔 무조건 해야했기에 약 이틀간 머리를 박아서 해결했다..!!저같은 경우에는 Node.js

이번 프로젝트에서 React-Query를 선택하게 된 이유에서 얘기해볼까 한다. React-Query는 서버의 상태를 다루는 라이브러리이고 mobx와 redux 등은 클라이언트의 상태를 다루는 라이브러리이다. > ## 💥 redux를 사

오늘 면접을 보고왔는데, 기술면접을 보던 중 React Hooks에 대한 질문을 받았는데, 대답을 제대로 하지 못한 부분이 있어서 이를 회고할 겸 모든 React Hooks에 대해 총 정리를 해보려고 한다.Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할

이 포스트는 전에 올렸던 React Hooks의 종류 및 개념에 대한 총 정리를 이어서 작성하는 글 입니다.useState를 대체할 수 있는 함수이다.state보다 복잡한 상태관리가 필요한 경우 reducer를 사용할 수 있다.reducer는 이전 상태와 Action을