React and Next.js

React에 관한 공부 정리 시리즈점차 채워나갈 용도

보일러 플레이트란? > 아래의 예시는 Next.js를 통해 src폴더를 만들지 않고 프로젝트를 만들었을 때의 예시입니다. 보일러 플레이트란 쉽게 말해 설치된 프로젝트의 초기 폴더 구조입니다. 이렇게 초기 셋팅이 완료된 폴더를 '보일러 플레이트라고 합니다. 이는 회

컴포넌트란 UI 또는 기능을 부품화 해서 재사용 가능하게 하는 것입니다.쉽게 말해서 부품들이라고 생각하면 됩니다.위와 같은 그림을 만든다고 할 시, 일일이 하나하나 다 만들어 주기 보다는, 동일한 UI를 재활용하고, 안에 데이터와 이미지만 바꿔 표현할 수 있습니다. 이

React에서 컴포넌트 작성 방법은 2가지로 나뉘어 집니다.React는 처음에 클래스형 방법만 존재했습니다. 클래스형은 어렵고, 복잡하여 이후에 함수형 컴포넌트 방법이 추가되었습니다. 하지만 함수형 컴포넌트 그 자체만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼 수 없

state란 리액트 컴포넌트에서 데이터를 담기 위한 상자입니다.자바스크립트에서 어떠한 데이터를 담기 위한 상자로 변수를 배웠습니다. 이와 동일하게, 컴포넌트에서 사용하는 변수를 state라고 지칭합니다.state: 컴포넌트에서 사용하는 변수(state)setState:

라우터(router) 객체란 페이지 이동과 관련된 기능을 가지고 있는 객체입니다.이 객체를 사용해서 A 페이지에서 B 페이지로 이동할 때, "B 페이지로 라우팅한다"고 말합니다.Next.js 에서는 라우터를 사용하려면 useRouter 훅을 사용해서 router 객체에

Apollo는 GraphQl을 통해 서버와 통신하고 캐시로 저장하는 상태 관리 라이브러리입니다. 하지만 꼭 서버에 국한되지 않고 완전히 독립적으로 사용될 수 있어서 로컬 상태관리로도 많이 쓰입니다.apollo-client 라이브러리를 설치한 후, 전역 설정을 위해 '\

컴포넌트가 여러개로 분리가 되면 데이터와 기능의 연결고리가 끊어지게 됩니다. 이를 연결해 주는 것이 Props입니다. Props 란 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수 / 함수 를 뜻합니다.부모 컴포넌트가 Props를 물려줄때는 객체로 묶어서 넘기게 됩니

setState는 지난 포스팅에서 값이 변경이 되면 자동으로 리렌더링 해주는 기능이 포함되어 있다고 설명했었습니다. 이 때문에 setState는 비동기로 작동 합니다.만약 setState가 동기로 작동하게 된다면 변경될때마다 바로 바로 렌더링을 하기 때문에 비효율적으로

map과 filter 모두 배열의 반복문으로 사용하는 내장함수 이기 때문에 배열과 함께 사용해야 합니다.map은 배열의 원소를 일괄적으로 변형시킬 때 사용하기 좋습니다.예를 들어, const 친구 = "철수" , "영희", "훈이" 가 있을 경우, 모두 앞에 '김'

Graphql에서 데이터를 조회하는 경우는 Queries를 사용한다고 했습니다. 허나 사용자가 게시판에 글을 작성하거나, 기존의 글을 수정 및 삭제하는 경우 기존의 데이터와는 값이 달라지기 때문에 새로운 데이터로 다시 받아와 보여주어야 합니다. refetchQuery는

페이지 번호를 클릭해서 이동하는 방식의 페이지 처리 방법입니다. 일반적으로 게시판 형태의 페이지에서 가장 일반적으로 사용되는 방식 입니다.실습을 위해 GraphQL, Next.js 를 사용하였습니다.위 코드를 보면 fetchBoards를 이용해서 data를 받아온 후

무한 스크롤이란 '인스타그램', '유튜브' 앱과 같이 밑으로 스크롤을 내리다가, 마지막에 도달하면 새로운 데이터가 계속해서 추가되는 방식의 페이지 처리 방법을 뜻합니다.직접 구현하는 방법도 있지만 대표적인 라이브러리인 'react-infinite-scroller' 라이

React에서 컴포넌트를 Class와 Function으로 모두 만들 수 있다. Class는 React에서 제공하는 Component라는 클래스를 extends, 상속해서 만들 수 있다. Function은 간단하게 함수로 만들 수 있습니다. Class에는 상태 즉 데

componentDidMount(컴포넌트가 처음 그려질때 자동으로 실행되는 함수) 다른 패이지에서 이 페이지로 들어와서 컴포넌트가 그려질때 자동으로 실행되는 함수componentDidUpdate (컴포넌트가 변경되면 자동으로 실행되는 함수) onClick으로 state

클래스형 컴포넌트에는 componentDidMout와 같은 생명주기 메서드들이 있습니다. 이와 같이 함수형 컴포넌트에서의 생명주기관련 훅은 useEffect 입니다.의존성 배열 \[] 에 아무것도 넣지 않으면 Mount시에만 렌더해주고 끝나게 됩니다.(1번만 실행)의존

axios와 useQuery, useMutation(graphql) 의 차이점위와 같은 GraphQL 코드가 있습니다. 해당 코드는 'Graphql-API 요청' 이라는 버튼을 누르면 createProduct함수를 mutation으로 요청하여 \_id, number,