본문 바로가기

React/공부공부

(12)
[React] Styled-Components 참고 (props warning / Transient Props) * 비표준 props가 DOM에 전달되는 경우 버튼을 누르면 isVisible 상태값이 변경되며 Box 컴포넌트가 나타나고 사라지는 css 스타일을 적용.const App = () => { const [isVisible, setIsVisible] = useState(true); return ( setIsVisible(!isVisible)}>Toggle Box );};const Box = styled.div` background-color: lightblue; width: 200px; height: 200px; display: ${(props) => (props.visible ? 'block' : 'none')}; // 경고 발생`; 콘솔창에 경고가 뜬다...
[React] Redux 라이브러리 (createReducer) [ Redux ]애플리케이션의 전역 상태를 관리하기 위한 라이브러리.  Redux Toolkit(RTK)을 설치하면 Redux의 거의 모든 기능들을 사용 할 수 있음.  [ Redux  주요개념 ] * Store : 전역 상태가 저장되는 곳. 하나의 애플리케이션에 단 하나의 스토어만 존재.* Action : 상태를 변경하기 위한 명령. 객체 형태로 'type'필드를 반드시 포함.* Dispatch : 액션을 스토어에 보내는 함수.* Reducer : 액션이 발생했을 때 상태를 어떻게 변경할 지 정의하는 함수.* Subscription : 스토어의 상태가 변경될 때 특정 함수가 호출되도록 설정하는 기능. (데이터 흐름)사용자와의 상호작용으로 액션 객체 생성 => 생성된 액션 디스패치 => 디스패치된 액션이..
[ React / ag-grid ] grid 내부에 버튼 넣기 grid 옵션은 아래처럼 사용.버튼 작동을 위해 'onCellClicked' 필요.// 사용한 grid 옵션들  grid의 rowData와 columnDefs는 useState함수로 아래처럼 지정. const [list, setList] = useState([]);const [colDefs, setColDefs] = useState([ { field: "checkbox", headerName: "", headerCheckboxSelection: true, checkboxSelection: true, maxWidth: 50, cellRenderer: (props) => { props.node.setSelected(props.data.chec..
[React Hook] UseMemo, UseCallback [ UseMemo ]함수의 결과를 메모이제이션.=> 의존값이 변경되지 않으면 함수의 재연산 없이 메모제이션된 값을 반환. 아래처럼 배열 arr에 대해, 배열의 합을 구하는 함수 sum 이 있을때, const [arr, setArr] = useState([1, 2, 3, 4, 5]); const [count, setCount] = useState(0); // 배열합 const sum = arr.reduce((a, b) => a + b); console.log("배열합계산"); // 카운트클릭 const handleClick = () => { setCount((prev) => prev + 1); }; // 배열값추가 const addArr = () => { setArr((pr..
[React] Debounce 를 활용한 검색기능. [ Debounce ]연속된 이벤트에서 마지막 이벤트만 처리.import React, { useRef } from "react";const useDebounce = (callback, delay) => { const debounceTimer = useRef(null); return (...args) => { if (debounceTimer.current) { clearTimeout(debounceTimer.current); } debounceTimer.current = setTimeout(() => { callback(...args); }, delay); };};export default useDebounce;debounceTimer 를 'useRef' 로 선..
[React] 리렌더링 조건 1. 상태(State) 변경함수 컴포넌트에서 useState, useReducer 를 사용하여 상태를 업데이트 할 때. 2. Props 변경 & 부모 컴포넌트 렌더링컴포넌트의 props가 변경될 때.부모 컴포넌트가 리렌더링되면 (props와 관계없이) 모든 자식 컴포넌트도 리렌더링. (형제관계끼리는 영향을 주지 않음)import React, { useState } from "react";function App() { return ( App Component );}function Parent() { const [count, setCount] = useState(0); return ( Parent Component setCount(count..
[ React / ag-grid ] 관련정리 rowDrag: true  => 드래그 이벤트 적용시킬 column에 지정하면 아래처럼 표시됨.valueParser : 셀에서 값이 편집된 후 호출. 입력값이 지정한대로 파싱/변환되며 반환값이 valueSetter로 전달. valueSetter : 데이터가 셀에 입력되기 직전에 호출. 셀 값이 변경될 때마다 호출. (cellEditor 사용시 유용.)=> 변경값이 적용되면 return true, =>   return false 로 해주면 변경값이 적용되지 않음. =>  기존 데이터모델 값과 변경한 값이 같으면 newValue로 잡지 않는다. 대신 공백이 포함되면 잡음**  * valueParser에서 입력값이 변환되어  valueSetter 에서 변환된 값을 데이터 모델에 저장하거나 추가로직 실행. ce..
[React 참고] eslint-disable / Lint 끄기 (WARNING) /* eslint-disable */  : Lint 끄기 (아래처럼 뜨는 WARNING 메시지 끄기) 아니면 WARNING이 일어나는 부분은 해결해주기.