React 실습 (38) 썸네일형 리스트형 리액트를 베이스로 데이터를 요청하고 화면에 보여줘 보자! - (2) # 이전 내용 이전에 일정 width를 넘어가면 줄 바꿈 하는 ui를 구현해주지 못했다. 이 부분을 수정하는 데 성공했다. [ 설명 ] 입력받은 태그 목록들을 일정 width에 도달하면 줄 바꿈을 하려면 display: flex; 와 flex-wrap: wrap; 이 필요하다 우리는 현재 app이라는 클래스를 가지고 있는 div태그에 카드를 추가하고 있습니다. [ 컴포넌트 코드 ] {loading === true ? ( data.map((information) => ( 카드 { information.gender } { information.name.first } { information.name.last } { information.phone } { information.email } )) ):(Load.. 리액트를 베이스로 데이터를 요청하고 화면에 보여줘 보자! -(1) # 들어가기에 앞서... 최근 라이브 코딩할 때 주어진 과제를 주제로 하려고 합니다. 처음 해보는 방식이였는데 너무 긴장되고 아무 생각도 안 나서 중도 포기 나왔지만, 해보고 싶었기에 해봤고 해 본 과정을 복습 차 포스팅합니다. [ 요구 사항 ] 정확히 기억은 안나지만 대충 데이터를 요청하면 해당 데이터는 사람 하나하나의 인적사항이 있습니다. 해당 인적사항을 카드 형태로 보여주는 것이 있었고, 가져오는 동안 Lodading...이라는 문구가 나오게 하는 거였습니다. 추가적으로 ui도 입맛에 맞게 구현할 수 있으면 해 보라 하는 것도 있었던 거 같은데 이건 패스하겠습니다. [코드] 해당 url로 axios를 이용하여 데이터를 요청하는 코드 async function axiousCall() { await a.. useCallBack 훅 정리 함수 메모이제이션 useCallback()은 함수를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수입니다. 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줍니다. const exCallback = useCallback(함수, 배열); 예를 들어, 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다면 이 함수는 해당 컴포넌트가 랜더링될 때 마다 새로운 함수가 생성됩니다. const add = () => x + y; 하지만 useCallback()을 사용하면, 해당 컴포넌트가 랜더링되더라도 그 함수가 의존하는 값들이 바뀌지 않는 한 기존 함수를 계속해서 반환합니다. 즉, x 또는 y 값이 바뀌면 새로운 함수가 생.. 리덕스 툴킷과 함께 백앤드 서버에 데이터 보내기, 데이터 가져오기(3) 이제 까지 한 방법과 다른 방법은 작업 크리에이터를 사용하는 것이다. 이제 우리만의 작업 크리에이터를 만들 수 있고, 소위 썽크(thunk)를 만들 수 있다. * thunk: 는 다른 함수가 완료될 때까지 기다리는 함수라고 볼 수 있다. cart-slice.js 안에 이제까지 썻던 액션함수를 넣어서 쓸거임. 이전에 app.js에서 운용했던 모든 액션함수 fetch 관련 비동기 함수를 cart-slice.js에 모조리 넣을거임. - 별도의 js함수에는 async/ await를 넣을 수 있기 때문에 - 오류 캐치는 try/ catch로.. - 함수로 만든 코드내 액션함수를 함수를 export하면서 이용하는 방식으로 사용할 것임. import { createSlice } from '@reduxjs/toolki.. 리덕스 툴킷과 함께 백앤드 서버에 데이터 보내기, 데이터 가져오기(2) useEffect를 사용하고 있기 때문에 비동기를 추가해서는 안된다. useEffect안에 fetch관련 코드를넣고 async/await를 사용할 것. 1. 슬라이스 함수에 변수와 상태를 처리해줄 리듀서를 추가 import { createSlice } from '@reduxjs/toolkit'; const uiSlice = createSlice({ name: 'ui', initialState: { cartIsVisible: false, notification: null }, reducers: { toggle(state) { state.cartIsVisible = !state.cartIsVisible; }, showNotification(state, action) { state.notification = .. useRef대한 좋은 설명 useRef를 사용하는 이유 자바스크립트에서 특정 DOM (태그)을 선택할 때 getElementById, querySelector 같은 DOM Selector 함수를 사용한다. 우리 리액트(특히 함수형 컴포넌트)에서는 특정 태그를 선택할 때 useRef를 사용한다. 특정 DOM을 선택? 구체적으로 무슨말이죠? 말 그대로 특정 태그만 지정해서 그것만 사용할 때 useRef 를 쓴다는 말이다. 예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등이 있다. 또한 그래프라던가 비디오 등 외부 라이브러리를 사용할 때도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해야 하는 상황이 발생 할 수 있다. useRef / forward.. 리덕스 툴킷과 함께 백앤드 서버에 데이터 보내기, 데이터 가져오기 * 백앤드 서버를 추가하여 데이트를 서버에 저장하고, 가져오는 작업을 리덕스와 함께 해보자. * 백앤드 서버를 직접만드는 것 어려우니 더미 데이터베이스용으로 firebase를 이용한다. * 리덕스내에 함수는 부수효과가 없는 순수함수여야 합니다 * 순수함수? 함수의 안팎에서 뭔가 예기치 않은 일이 생길 가능성이 있는 함수는 순수함수가 될 수 없습니다 입력이 이루어지면 입력에의 변하는 값이 동일해야 한다고 생각하면 되겠습니다. 하지만 우리는 현재 백앤드 서버에 http요청을 하고 하는 작업을 하기 때문에 중간 과정에 state값이 바뀔 수 있습니다. 2가지 방법이 있는데 첫번째 방법인 컴포내부에 부수효과인 비동기코드를 넣는것부터 해보자. 두번째 방법은 액션 함수에 넣는 것이다. - 리덕스에.. 리덕스 툴킷 사용 복습! 리덕스 툴킷을 이용하는 코드를 정리하는 글을 시작해보련다. # 1. slice함수를 만든다. [cart-slice 코드] import { createSlice } from "@reduxjs/toolkit"; // createSlice를 이용하여 초기값 초기화 const cartSlice = createSlice({ name: "cart", initialState: { items: [], totalQuantity: 0, totalAmount: 0, }, // 리듀서 함수 생성 reducers: { // 리듀서 함수를 내가 쓸려도는 의도에 맞게 코드 addItemToCart(state, action) { // 넘겨받는 매개변수에는 action.payload로 접근할 수 있다. // dispatch에서 전달해.. 이전 1 2 3 4 5 다음
