본문 바로가기

부트캠프교육중/react80

useRef Dom을 직접 건드려야하는 상황이 온다면 이럴때 사용할수있는것이 바로 useRef라는 Hook함수이다. useRef로 DOM노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할수있다. 이 주소값은 컴포넌트가 리렌더링 되더라도 바뀌지 않는다. useRef를 통해 값을 저장시 리렌더링후 값이 초기화가 되지 않습니다. 따라서 렌더링 여부에 상관없이 값을 유지하고 싶을때 사용되기도 합니다. useRef를 남용하는 것은 부적절하고, React의 선언형 프로그래밍 원칙과 배치된다. const 주소값을 담는 그릇 = useRef(참조자료형) return ( ); //버튼 클릭시 input요소에 focus가 되도록 하려고 합니다. import React, { useRef } from 'react'; functi.. 2023. 2. 23.
상태관리 #상태관리를 보다 더 효율적으로 할수있는방법 컴포넌트와 상태를 분리하여 전역에서 상태관리를 해줄수있게 해주는 상태 관리 라이브러리인 redux. #redux를 사용하면 react컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 리덕스를 활용한 상태관리는 빛을 발합니다. #상태: 변하는 데이터 UI, 프론트엔드 개발에서는 "동적으로 표현되는 데이터" #상태를 다룰때에 side effect는 주요 고려 대상이다. side effect: 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인 대표적으로 네트워크 요청, api 호출 --------------------------------------------- #상태의 두가지 구분 로컬상태: 특정.. 2023. 2. 23.
Storybook #CDD를 할수있는 대표적인 도구가 styled component이고 CDD를 지원하는 도구중 하나인 component explorer(컴포넌트 탐색기)에 많은 UI개발도구가 다양하게 있는데 그중 하나가 storybook이다. #Storybook -UI개발 즉, CDD를 하기 위한 도구이다. (UI개발도구) -각각의 컴포넌트들을 따로 볼수있게 구성해주어 한번에 하나의 컴포넌트에서 작업할수있다. 복잡한 개발스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요없이 전체 UI를 한눈에 보고 개발할수있다. -재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할수있는 다양한 테스트 상태를 확인할수있다. -이를 통해 버그를 사전에 방지할수.. 2023. 2. 22.
Styled Component # Styled Components -기능적(functional) 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할수있는 아주 단순한 패턴을 제공한다. -HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할수있게 된다. 그게 CSS in JS 라이브러리이고. 그중에서 현재 가장 인기있는 라이브러리가 Styled Components이다. 즉, Styled Component는 CSS-in-JS라이브러리 중 하나이다. -CSS를 컴포넌트화 시킴 # 사용법 //설치하기 npm install --save styled-components //styled-components를 사용할 파일로 불러와라. import styled from "styled-components" /.. 2023. 2. 21.

티스토리툴바