React (26) 썸네일형 리스트형 2024.1.31 기록 ( props drilling) 기본적으로 데이터를 주고 받는 가운데 반드시 일어날 수밖에 없는 하나의 과정인데, 이것이 발생한다고 무조건 나쁜것은 아니다. 다만 유지보수가 어려운 점과 직관적이지 못한 부분이 가장 큰 문제인데 이번에는 단계에 걸쳐서 context API , redux를 사용하는 것으로 그 문제를 해결해보는 것이 가장 큰 과제이다. 이번 과제에서 문제가 생긴 부분은 주로 데이터를 주고 받는 부분인데, 라우터 컴포넌트에서 데이터를 제작한 것이 아닌, 하단의 문서에서 제작을 하고 뿌려주는 과정이 들어있었기 때문에 페이지를 오갈 때 신규데이터를 가지고 갈 수 없는 단점이 있었다. 이 부분을 여러가지 방식으로 파훼한 다른 케이스들이 있는데 로컬스토리지를 이용하는 방법도 그 중 하나였다. 지금은 라우터쪽으로 옮겨 진행하는 것으로.. 2024.1.29 기록 (Link 컴포넌트와 useNavigate의 차이) SPA를 구성하는 프로젝트를 진행하던 도중, 다중 페이지를 구현하고 싶어 방법을 찾았는데 hook으로는 useNavigate가 있었고, Link 컴포넌트가 있었다. Link Link 컴포넌트는, HTML의 a태그와 역할이 비슷했는데, 차이점이 있다면 로 사용되는 a태그는 페이지를 이동하고, 새로고침하는 것 까지가 하나의 과정인 반면에, Link 컴포넌트는, 필요한 부분만 리렌더링을 거친다는 차이가 있었다. 역할이 다르다, MPA를 구현 할 때는 a href 를 사용하면 되는 법이다. contact 페이지로 이동하기 이렇게 이동하고자 하는 페이지의 링크를 입력해주면 된다. 그렇게 되면 다음과 같이 하이퍼링크처럼 표기가 된다. useNavigate useNavigate는 특정 조건에 맞을 때 페이지를 이동하.. 2024 .1 26 기록 redux (상태관리 라이브러리) 상태관리 라이브러리 라는 이름으로도 불린다. useState를 이용함에 있어서 불편한 부분들이 존재했다. dispatch가 action을 store에 전달, store는 action 객체에 있는 타입에 따라, state를 변경하는 작업을 함., action객체 switch문으로 되어있고 type에 따라 변함,. useSelector , useDispatch import { useDispatch, useSelector } from "react-redux" import './App.css'; import { minusOne, plusOne } from "./redux/modules/counter"; function App() { const counter = useSelector((state) => { ret.. 2024.1.25 기록 ( 최적화를 위한 hook) 지금까지 나는 함수형 리액트를 위주로 구현했고, useState를 이용해서 리렌더링을 진행했다. 이 useState를 이용해서 리렌더링을 진행하면 문제점이 몇 개 있는데 batch업데이트를 진행하기 때문에 작업에서 누락이 있을 수 있다. 여러개의 useState를 운용할 경우 필요 외의 상황에서 리렌더링이 발생 할 수 있는 부분이 있다. 이러한 부분에서 원하는 부분들을 원하는 포인트에서 리렌더링 할 수 있게 조절해주는 hook들, 즉 최적화를 위한 hook들이 존재한다. useEffect useEffect는 원하는 타이밍에 리렌더링을 진행하고자 하는 데 목적이 있다. useEffect는 페이지가 처음 렌더링이 된 이후, 원하는 조건에서만 리렌더링을 진행한다.그리고 return으로 컴포넌트가 사라졌을 때 .. 2024.1.24 기록 (JavaScript closure 와 React useState) 노션에 작성한 원본글을 넘겨와서 음슴체로 작성이 되었다.. 클로저(closure)에 대한 이해 const x = 1; function outerFunc(){ const x = 10; function innerFunc(){ console.log(x); } innerFunc(); } outerFunc(); 자바스크립트의 파악영역 전역으로 x = 1 이라는 상수를 선언 함수 outerFunc innerFunc console.log(정확히는 log가 함수임)가 존재하는 것을 확인. 과정 outerFunc를 실행하는 시점에서 함수 내부를 읽어옴. const x = 10이 있구나. innerFunc를 실행하네? 함수 innerFunc 내부 읽어오자 console.log 실행하네? ㅇㅋ 더 없네 순차적으로 실행하면 .. 2024.1.23 기록 (React fragment와 useState) react의 return 내부에는 div태그로 감싸주는, 최상위 태그를 위치시키는 규칙이 있다. 하나의 컴포넌트만 return 할 수 있기 때문인데, 흔히 사용하는 div태그는 줄바꿈을 한 번 시행하게되는 불편함이 있다. 많이들 , 를 사용하는데 사실 , 라는 원래의 명칭이 존재하는 태그였다. 중요한 건 하나의 태그로 감싸주는 것이다. 원래 div태그로 감싸져 있거나, 혹은 다른 컴포넌트의 children을 받는 형식으로 구조가 되어있다면 fragment를 사용할 필요가 없다. 이로써 필요없는 코드 2줄을 줄일 수 있게 됐다. useState는 비동기적으로 동작한다. 이유는 함께 사용하는 setState가 비동기적으로 움직이기 때문인데, 그 이유는 컴포넌트 내부에서 모든 값들의 변화를 실시간으로 처리하면.. 2024.1.19 기록 (CSS와 컴포넌트 관리) css의 사용 기존 javaScript와 HTML에서 사용했던 Class는 React에서도 똑같이 사용한다. 다만, className 으로 부여를 한다. 독립된 경로에 css 문서를 만들어주고 ClassName을 받아온다면 HTML때의 작업처럼 편하게 처리가 가능하다. 만약, jsx문서 내에서 style 코드를 작성해야한다면 다음과 같은 룰이 있다. function app() { const boxSetting ={ color: "red", display: "flex", ... }; return( ) } 객체형식으로 가져오므로, Key 와 Value 값으로 만들어준다. 특히 align-items 나 justify-content 같이 하이픈을 이용한 부분은 카멜케이스(alignItems , justifyCo.. 2024.1.18 기록 (useState와 onChange) react과정을 진입하면서 기초기 되는 state와 prop을 정리했고, hook 중에서 useState, onChange 사용에 익숙해져보았다. useState는 매개변수로 변수와 콜백함수를 받는 느낌과 비슷하다. useState('sotheby') 와 같은 값은 default값이 된다. import React, { useState } from 'react' function App() { const [name, setName] = useState('sotheby'); return ( {name} 환승 ) } export default App 최초값은 sotheby였으나, 버튼 onclick을 통해 sonetto로 변하는 기능이다. import React, { useState } from 'react' .. 이전 1 2 3 4 다음
