728x90 Grid2 [React] useRef 하나로 여러 데이터 관리하기 (feat. ag-grid) 목표: 하나의 useRef 로 현재 Grid 데이터 저장하기 의도: 반복문으로 감싸진 Grid 컴포넌트에 useRef 를 각각 세팅하기가 어려워서, 하나의 useRef 를 통해 여러 Grid 데이터를 관리하고 저장할 수 있도록 하고 싶었다 기능: Grid 추가 버튼을 누르면 Grid 가 추가되고 - 사용자가 Grid 내용을 변경하면 - 변경한 값을 저장한다 방법: useRef 초기값을 null 이 아닌 [] (빈 배열) 로 세팅하여, 하나의 useRef 로 여러 Grid 데이터를 관리한다 부모 컴포넌트 const gridRef = useRef([]) export const Parent = () => { return ( 배열.map((item, idx) => ( )) ) } gridRef 에 빈 배열을 .. 2024. 1. 18. [CSS] grid 속성들 정리 📌 flex vs grid ? 아이템을 자유자재로 배치할 수 있는 CSS Layout 에는 flex 와 grid 가 있다. flex : 아이템을 1차원적으로 배치할 수 있음 (가로 or 세로) grid : 아이템을 2차원적으로 배치할 수 있음 (가로 and 세로) 📌 grid 사용법 1. 부모 컨테이너에 display: grid 를 지정한다. 2. grid 안에 들어 있는 자식들은 각각 grid cell 로 변환된다. 📌 grid 속성들 정리 부모 속성들 ► grid-template-columns : 컨테이너 열(column)의 크기 지정 ► grid-template-rows : 컨테이너 행(row)의 크기 지정 ► grid-auto-rows : 컨테이너 행(row)이 몇 줄인지 모를 때, 전체적으로 자.. 2023. 9. 3. 이전 1 다음 728x90
