React4 React - DOM Reference 를 잘 활용할 수 있는 useRef 1. useRef 지금까지 React 를 공부해보며, React 만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있었다. DOM 에 대한 지식이 필요 없다고 생각할지도 모른다. 하지만 React 로 모든 개발 요구 사항을 충족할 수는 없다. 아래 DOM 엘리먼트 주소값을 활용해야 하는 경우 특히 그렇다. ## DOM 엘리먼트 주소값 ## focus text selection media playback 애니메이션 적용 d3.js, greensock 등 DOM 등 기반 라이브러리 활용 ## useRef ## React 는 위와 같은 예외적인 상황에서 useRef 으로 DOM 노드, 엘리먼트, 그리고 리액트 컴포넌트 주소값을 참조할 수 있다. const 주소값담는변수 = useRef(참조자료형) //.. 2021. 6. 1. React - CDD 1. CDD ( Component-Driven Development ) 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발해놓는것 ----------------------------------------------------------------------------------- 2. 컴포넌트 UI 개발을 위한 Storybook Storybook 은 UI 개발 즉, Component Driven Development 를 하기 위한 도구이다. Storybook 은 재상용성을 확대하기 위한 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션 할 수 있는 다양한 테스트 상태를 확인할 수 있다. 버그를 사전에 방지할 수 있으며, 테스트 및 개발 속도를 향상시키는 장점이 있고, 애플리케이션 또한 .. 2021. 6. 1. React - Side Effect 1. Side Effect( 부수 효과 ) 함수 내에서 어떤 구현이 함수의 외부에 영향을 끼치는 경우에 해당 함수는 Side Effect 가 있다고 이야기한다. let foo = "Hello"; function bar() { foo = "World"; } bar(); // bar 는 Side Effect 를 발생시킨다. ----------------------------------------------------------------------------------- 2. Pure Function( 순수 함수 ) 순수 함수란, 오직 함수의 입력( 전달인자 )만이 함수의 결과에 영향을 끼치는 함수를 말한다. 순수 함수는, 입력으로 전달된 값을 수정하지 않는다. function func(a, b) { ret.. 2021. 5. 28. React - 데이터 흐름 1. React 데이터 흐름 React 의 개발 방식의 가장 큰 특징은 페이지 단위가 아닌, 컴포넌트 단위로 시작한다는 점이다. 먼저 컴포넌트를 만들고 페이지를 조립해나가는 순서, 상향식( Bottom - Up )으로 앱을 만든다. 이 것의 가장 큰 장점은 테스트가 쉽고 확장성이 좋다. ----------------------------------------------------------------------------------- 2. React 컴포넌트 하나의 컴포넌트는 한 가지 일만 해야한다. 컴포넌트는 컴포넌트 바깥에서 props 를 이용해 데이터를 마치 '인자'혹은 '속성'처럼 전달받을 수 있다. 즉, 데이터를 전달하는 주체는 부모 컴포넌트가 된다. 데이터 흐름이 하향식( Top - Down .. 2021. 5. 28. 이전 1 다음
