슬롱주리 Selon Julie

코딩앙마 | React JS #13 Custom Hooks - 초보자를 위한 리액트 강좌 별코딩 | React Hooks에 취한다 - Custom Hooks 커스텀 훅 | 리액트 훅스 시리즈 8dong.log | Custom Hooks 커스텀 훅이란? 중복된 코드를 줄이기 위함 custom hook은 내부에서 다른 react hook을 사용할 수 있음 (일반 함수는 불가) 내부에서 Hooks를 사용할 계획이 없다면(지금 또는 나중에) Hook으로 만들지 마세요. 커스텀 훅을 만든다 = 함수를 만든다 (함수이름에서 use를 붙이면 훅을 사용하면서 리액트에서 콘솔에 경고 메세지를 보내줌) 커스텀 훅을 만들면 내부의 로직을 상관하지 않고, 훅에 매개변수를 받아주고, 훅이 return 하는 값들만 꺼내서 쓸 수..

원문 https://dmitripavlutin.com/react-useeffect-explanation/ A Simple Explanation of React.useEffect() useEffect() hook executes side-effects in React components. dmitripavlutin.com 저는 React 훅의 표현력에 깊은 인상을 받았습니다. 아주 적은 양 코드로 많은 것을 할 수 있습니다. 그러나 훅의 간결함에는 대가가 있습니다. 시작하기가 상대적으로 어렵다는 것입니다. 특히나 useEffect()이 그렇습니다. useEffect()은 React 함수형 컴포넌트에서 side-effects을 관리하는 훅입니다. 이번 글에서는 useEffect()훅을 사용하는 방법과 언제 ..

원문 | props vs state React 를 사용하여 UI를 재구축 하기 시작한 이후 로 가장 많은 개발자 질문은 아마도 다음과 같을 것입니다. props 과 state 의 정확한 차이점은 무엇입니까 ? 작동 방식을 이해하기는 매우 쉽지만(특히 문맥에서 볼 때) 개념적으로 이해하기는 다소 어렵습니다. 둘 다 추상적인 용어를 가지고 있고 값이 동일하게 보이지만 역할도 매우 다르기 때문에 처음에는 혼란스럽습니다. 문맥 컴포넌트의 주요 책임은 raw data를 풍부한 HTML로 변환하는 것입니다. 이를 염두에 두고 props 과 state 는 함께 HTML 출력이 파생되는 raw data 를 구성합니다. props + state 는 컴포넌트의 render() 함수에 대한 입력 데이터 라고 말할 수 있으므..

원문 Dmitri Pavlutin | The Complete Guide to useRef() and Refs in React The Complete Guide to useRef() and Refs in React How to use React.useRef() hook to create persisted mutable values (also known as references or refs), as well access DOM elements. dmitripavlutin.com 이 글을 통해 React.useRef()훅을 사용하여 지속되는 가변 값(refs 또는 참조references라고도 함)을 생성하고, DOM 요소에 접근하는 방법을 배웁니다. 목차 1. 가변 값 1.1 예시: 로그인 버튼 클릭 1.2..

React Router | useRoutes useRoutes 훅은 와 기능적으로 동일 하지만 element 대신 JavaScript 객체를 사용하여 경로를 정의합니다. 이러한 객체는 element 와 동일한 속성을 갖지만 JSX가 필요하지 않습니다. useRoutes의 반환 값은 경로 트리를 렌더링하는 데 사용할 수 있는 유효한 React 요소이거나 일치하는 항목이 없는 경우 null입니다. import * as React from "react"; import { useRoutes } from "react-router-dom"; function App() { let element = useRoutes([ { path: "/", element: , children: [ { path: "messages",..

참고 dosomething.log | React, 한글 입력시 keydown 이벤트 중복 발생 현상 푸고배 | [JavaScript] 한글 키보드 입력 시 이벤트가 두 번 호출되는 경우 kwangsunny | keydown 이벤트 한글 중복 입력 현상 현상 한국어로 검색어를 적은 후 enter를 쳐서 검색을 실행하면(keydown 이벤트가 트리거 되면) 검색어가 '안녕'일 시 '안녕녕'이렇게 입력되는 현상이 발생하였다. 이 현상은 안녕에서 'ㅇ'까지 친 후 바로 enter를 누르면 나타났는데, 반면'녕'까지 친 후 오른쪽 화살표 → 커서를 눌렀다거나, space는 눌러 띄어쓰기가 되었있으면 나타나지 않았다. const handleOnKeyDown = useCallback( (e) => { if (e.ct..

리액트의 임무 UI를 랜더링하는 것(화면을 그리는 것), 사용자의 입력에 반응해서 필요할때 다시 랜더링 하는 것 -JSX코드, DOM를 평가하고 랜더링하기 -state, props를 관리해서 모든 컴포넌트에 필요한 데이터가 있는지, -사용자 입력을 잘 반영 -state, props가 바뀔때마다 컴포넌트를 재평가하기 =>컴포넌트(함수)안에 있는 모드 코드는 화면에 무언가를 가지고 오는 것과 관련 있음 Side effects는 이거(화면에 가져오는 것) 말고 다른 모든 것 -브라우저 스토리지에 데이터를 저장하는 것 -HTTP요청을 백엔드 서버에 보내는 것 -타이머를 설정하고 관리하는 것 => 이 일들은 일반적인 컴포넌트 평가의 밖에서 일어나야 한다(리액트와 아무 상관이 없기 때문에) *만약 컴포넌트 내부에서..

React JS | useReducer const [state, dispatch] = useReducer(reducer, initialArg, init?) 복잡한 상태관리를 도와줌 useState대신 useReducer를 사용할 수 있음 (대부분의 경우 useState를 사용하는게 좋음) 언제 useReducer를 사용하는지? 1. 함께 속하는 state들이 있는 경우 (state가 너무 많은 일들을 처리해야하는 경우) 2. 다른 state에 기반해서 state를 업데이트 하는 경우 useState() useReducer() 메인 상태관리 툴 더 많은 힘이 필요하다면 (reducerFn) reducerFn으로 더 복잡한 state 업데이트 로직을 짤 수 있음 독립적인 state, data 일 때 연관된 ..