분류 전체보기

모르는 개념을 알게되어서 적게되는 글이며, 항상 react에서 겪는 오류들이 줄어들었으면 하는 바람에 쓰는 글이다. 개념 1) 제어 컴포넌트 HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. 2) 비제어 컴포넌트 모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 ..

react에서 페이지 이동할려고 했을 때 이를 검색한 적이 있다. 각각마다 차이점이 존재하여 이에 대해서 서술해보고자 글을 적게 되었다. 개념 자바스크립트에서 페이지 이동 location.href : 새로운 페이지로 이동 location.replace : 새로운 페이지로 이동 react에서 페이지 이동 navigate : 새로운 페이지로 이동 차이점 1. 이전 페이지 이동 1) location.href와 location.replace location.href는 객체의 속성이며, loaction.replace()는 메서드(함수)로 작동된다. href는 페이지를 이동하는 것이기 때문에 뒤로가기 버튼을 누른 경우 이전 페이지로 이동이 가능하지만, replace는 이동한 페이지를 현재 페이지로 덮어 씌우기 때문..

처음 Flutter SDK 설치시 failed이라고 떠서 미국 flutter에서 설치하였다. 1. SDK 설치 압축파일을 받고 iTerm에서 unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip 이것은 압축파일이름을 잘 확인해야 한다. 그리고 굳이 명령어로 압축파일을 안 풀어줘도 되니 문서로 가서 압축된 파일을 바로 풀어도 된다. 2. 경로 설정 export PATH="$PATH:`pwd`/flutter/bin" 이를 쳐서 경로를 설정한다. 윈도우의 경우 환경변수 설정으로 들어가서 설정해주어야 한다. 나는 mac임으로 이렇게 경로를 설정했을 경우, 영구적으로 설정된 것이 아니기에 매번 들어갈 때마다 이를 쳐주어야 한다. 그래서 영구적으로 설정해야 한다...

우연히 글을 보다가 useState()가 비동기방식이라는 것을 알 수 있었다. 근데 react 코드를 짜면서 느낄 수 있는 부분들이 많아 놀랍지는 않았지만, 개념으로 확인시켜주니 좋았다. 그래서 비동기방식으로 처리할 때 불편함이 있어 동기 방식으로 처리하는 방식을 알고자 정리하게 되었다. 개념 const로 선언하는 이유는? 변수의 재할당을 막기 위해서 let을 사용하면 변수의 재선언이 가능해지기 때문에, 이를 방지하고 setState를 사용한 변수 변경만을 허락하기 위해서 const로 선언 state를 사용하는 이유 변수는 변경되어도 자동으로 화면이 바뀌지 않는다. setState를 사용시 state가 변경되면 자동으로 화면이 바뀌기 때문에 state를 사용한다. 비동기 방식 우선 개념에 대해서 보면, ..

우연히 글을 보다가 정리해두면 좋겠다 싶어서 정리하게 되었다. 정리하게 된 계기 React18 + StrictMode에서는 개발모드에서 data fetching이 최소 두 번이상 일어날 수 있다. 이러한 글을 계속 보았지만 왜 그런지 모르고 그냥 그런가보다하고 넘어갔다. 우리가 react를 이용하여 웹 사이트를 구현하고자 할 때 app.js는 기본적으로 생성된다. ReactDOM.render( , document.getElementById('root') ); 위와 같이 app.js가 생겼는데, 이를 아래와 같이 바꾸면 두번이나 재랜더링이 되지 않는다. ReactDOM.render( , document.getElementById('root') ); 개념 공식문서에 따르면 strictmode는 StrictM..

1. 이미지 업로드 const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); 이미지 업로드 2. hook으로 저장하여 커스텀 훅으로 사용 여기서 거의 핸들러 빼고 setter만 넣어서 value와 setter만 리턴하는 경우로 많이 쓴다. import { useState, useCallback } from 'react'; export default (initValue = null) => { const [value, setter] = useState(initValue); const handler = useCallback((e) => { setter(e.target.value); }, ..

context()에 대해서 정리하는 이유는 많이 보았기에 궁금해서 찾아보다가 너무 유익해서 정리하고자 한다. context()는 언제 쓰는가 여러 글 봤었는데 유튜브의 영상이 잘 설명되어 있어서 맨아래에 첨부해놓는다. react로 개발을 하다보면 props를 가져와서 쓰고 싶은 경우가 생긴다. 즉 하위 컴포넌트에서 상위 컴포넌트의 데이터를 가져오고 싶은 것이다. 나의 경우는 https://uhee-12.tistory.com/51 위 글을 보면 알겠지만, navigate와 location을 많이 사용했었다. 또한, redux를 사용하지 않아서 아직은 상태관리에 많은 어려움을 겪고 있다. 그러던 와중 context()를 알게 된 것이다. 위에서도 말한 것 같이 데이터를 전역적으로 사용하고 싶을 때 conte..

개념 filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열을 반환한다. 즉 filter()메서드는 내가 원하는 값들을 말 그대로 필터링하여 사용할 수 있다. 사용법 사용법에는 여러가지가 존재하는데 두가지로 나누어 설명하겠다. 1) filter()을 활용한 검색 let users = [ { id: 11, name: 'Adam', age: 23, group: 'editor' }, { id: 47, name: 'John', age: 28, group: 'admin' }, { id: 85, name: 'William', age: 34, group: 'editor' }, { id: 97, name: 'Oliver', age: 28, group: 'admin' } ]; let re..