루루의 우당탕탕 개발 스토리 루루의 우당탕탕 개발 스토리

우선, ref는 React에서 DOM에 직접 접근하기 위해 사용한다. 사용방법은 우선 useRef hook을 선언하여 ref 객체를 생성한 다음 원하는 Element의 ref 값을 넘기면 된다. import { useRef } from 'react'; export default fuction App() { const inputRef = useRef(null); const focusHandler = () => { inputRef.current.disabled = false; inputRef.current.focus(); }; const resetHandler = () => { inputRef.current.disabled = true; inputRef.current.value = ""; }; return ..

네이버, 카카오, 구글 3사의 소셜 로그인을 오로지 React 웹 서버를 통한 구현방식을 우선 소개하고, 백엔드를 이용하여 보안을 강화하는 방법도 함께 소개하겠다. OAuth 란? 구글, 페이스북, 트위터와 같은 다양한 플랫폼의 특정한 사용자 데이터에 접근하기 위해 제3자 클라이언트(우리의 서비스, 앱)가 사용자의 접근 권한을 위임(Delegated Authorization)받을 수 있는 표준 프로토콜이다. 쉽게 말하자면, 우리의 서비스가 우리 서비스를 이용하는 유저의 타사 플랫폼 정보에 접근하기 위해서 권한을 타사 플랫폼으로부터 위임 받는 것 이다. 우선 전체적인 OAuth의 구동방식은 아래와 같다. 우리는 우선 웹서버를 통하여 구현할 예정이니 위 그림을 참고하자. 우리의 웹 서버에서 카카오 로그인 요..

일단, 리액트 라우터를 알기 전에 리액트가 SPA를 쉽게 만들수 있도록 하는 라이브러리라는 점에 주목해야한다. SPA의 경우 브라우저상으로 뒤로 가기, 앞으로 가기와 같은 내비게이션 사용이 불가하다. 그 이유는 기존방식은 url 변경시 새로고침되며 모든 페이지를 reload하여 로드 시간이 오래 걸렸지만, React는 SPA 체제로 새로고침 대신 Router를 사용하여 변경된 소스만 바뀌도록 하기 때문에 속도를 개선한다. 하지만 페이지에 따라 주소를 각각 만들기 위한 Routing이 필요하고 리액트에서는 다양한 라이브러리를 통해 이러한 기능을 제공한다. 그러한 라이브러리 중 대표적으로 React Router가 있다. React Router는 여러 화면으로 구성된 웹 애플리케이션을 만들 때 클라이언트 사이..

React 앱의 마운트 과정 1. 함수 컴포넌트 호출 2. 구현부 실행 - props 취득, hook 실행, 내부 변수 및 함수 생성 - 이 때 hook에 등록해 둔 상태값, 부수함수 효과등은 별도 메모리에 저장되어 관리된다. (useMemo, useCallback등을 활용한 케이스) cf. useMemo vs useCallback 차이 및 각각의 특징과 언제쓰는지에 대한 포스팅 3. return 실행 - 렌더링 단 4. 렌더 단계 (렌더 트리 구축) - 새로운 가상 Dom 생성 후, 이전 가상 DOM과 비교하여 달라진 부분을 탐색하고 실제 DOM에 반영할 노드들을 결정한다. - DOM 트리에 있어도 display: none 속성이 있거나 head등 표시되지 않는 태그의 경우 화면에 표시되지 않을 수 있..

React Virtual Dom 과거에 React는 Virtual Dom을 사용하여 브라우저가 렌더링할 때, 이전 Dom과 현재의 Dom에서 변경내역을확인하여 실제 Dom에 반영할 부분을 결정한다. 이 때, 여기에서 궁금증이 들었다. 가상돔은 새로운 돔의 커밋 내역을 어떤 기준으로 확인하여 변경 내역을 비교하는 것일까? 정답은 얕은 비교이다. React는 노드를 비교할 때 얕은 비교를 한다. React의 얕은 비교는 같은 레벨에서만 일어난다. 숫자, 문자열, boolean과 같은 원시 자료형은 값 비교를 수행한다. 배열, 객체 등 참조 자료형은 그 안의 값 혹은 attribute를 비교하지 않고, 그들의 레퍼런스(참조되는 위치)를 비교한다. 실제로 React는 상태 값을 업데이트할 때에도 얕은 비교를 수..

useState를 사용하여 정의할 때를 생각해보면, 주로 DB를 통해서 데이터가 바뀌는 값이나 혹은 이벤트 핸들링을 통해 UI 바뀌는 값등 "변하는"값에 한정해 useState를 작성하게 된다. 이 중, useState의 초기값에 따른 렌더링 이슈를 한번 쯤은 경험해 볼 수 있다. 가령 const [age, setAge] = useState(3); 으로 정의되어 있는 useState가 있고, 해당되는 useState가 렌더 되어야 하는 컴포넌트에 useEffect(() => { setAge(20); }, []) 을 넣어 컴포넌트를 렌더하면 age가 0이었다가 20으로 바뀌는 걸 볼 수 있다. 이런 현상은 주로, useState에 데이터 초기값을 넣어줄 때 종종 생기는 이슈이다. 이때, useEffect가..

React는 컴포넌트라는 단위를 기반으로 설계하고, 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링한다. 이러한 React의 렌더링을 더 효율적으로 할 수 있게 도와주는 Hook들이 있다. 우선, 컴포넌트가 재랜더되는 조건을 살펴보자. 부모에서 전달받은 props가 변경될때 부모 컴포넌트가 리렌더링 될 때 자신의 state가 변경 될 때 shouldComponentUpdate에서 true가 반환될 때 forceUpdate가 실행될 때 컴포넌트가 복잡해질수록 위 조건의 극히 일부를 포함하고 있지만 재랜더하지 않아도 될 컴포넌트들 역시 재랜더가 되곤 한다. 그래서 대표적으로 아래 3가지를 통해 최적화한다. 1. useMemo useMemo(()=> func, [input_dependenc..