개발55 [React] React Hook_useRef useRef렌더링을 유발하지 않는 값을 저장하는 변수이다. 본질적으로는 .current 프로퍼티에 변경 가능한 값을 담고 있는 상자와 같다고 생각하면 된다.값을 참조하거나DOM을 조작하거나참조값의 재생산을 방지하는역할을 한다. 특징들을 종합적으로 살펴보았을 때 참조 값이 갱신되어도 컴포넌트가 리렌더링 되거나 갱신을 알 수 있는 어떤 동작이 이루어지지 않는다는 것을 알 수 있다.function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` points to the mounted text input element inputEl.current.focus(); .. 2023. 4. 12. [React] React Hook _ useEffect useEffect컴포넌트의 생에 주기에 맞춰 데이터를 받아오거나 DOM을 변경하는 등의 코드를 작성할 수 있는 함수이다. 클래스 생명 주기 메서드 중 componentDidMount와 compomentDidUpdate, componentWillUnmount가 합쳐진 것을 생각하면 된다. 첫 번째 인자로 수행할 코드, 데이터 구독 등의 setup이 들어가고, 두 번째 인자는 의존성 배열로 필수값은 아니지만 어떤 변수가 변경될 때만 effect가 필요하다면 의존성 배열에 변수를 추가하면 된다.useEffect(effect, [dependencies])useEffect(effect) : 렌더링 시마다 setup이 실행된다.useEffect(effect, []) : 컴포넌트가 최초 렌더링 되었을 때만 실행된다... 2023. 3. 21. [React] React Hook _ useState 리액트의 Hook이란?함수형 컴포넌트 내에서 state와 컴포넌트의 생명주기를 연동할 수 있게 해주는 자바스크립트 함수이다. 클래스 없이 리액트를 사용할 수 있게 해 준다. Hook 사용 규칙컴포넌트 최상단에서만 호출한다. 반복문, 조건문, 중첩 함수 내에서 호출하지 않는다.리액트 컴포넌트 함수 내에서만 호출해야 한다. 순수 자바스크립트 함수 내에서 호출하지 않는다.eslint-plugin-react-hooks라는 플러그인을 설치하면 규칙에 맞는지 자동으로 검사해 준다. CRA로 앱을 구성하였다면 해당 플러그인이 이미 포함되어 있다. useState컴포넌트 내에서 상태 변수를 관리하는 함수다. 상태 변수와 상태를 갱신하는 함수를 반환하며, useState에 전달된 첫 번째 인자(init)가 초기 상태.. 2023. 3. 9. 비전곰VisionBear 스터디 프로젝트 - 드디어 배포! 북극곰 프로젝트 드디어 배포까지 끝났다!코드의 'ㅋ'도 모르는 사람들끼리 모여 처음부터 끝까지 얼레벌레 살 붙여가며 리액트로 1차 작업을 하고,또, 타입의 'ㅌ'도 모르는 상태에서 타입스크립트 꾸역꾸역 적용해 가며 리팩토링에 추가 기능까지 넣어서 완성✌ 프로젝트 완성한 것도 정말 기쁘지만, 이렇게 좋은 인연들을 만나게 되어 두배로 기쁘다.처음 독학을 시작했을 때, 힘들고 어려워도 어찌 해결할 줄도 모르고, 어디 털어놓을 곳도 없었는데.. 이제 개발에 대해서 공감해 줄 친구들이 있어 너무 든든하다. 리팩토링 하면서 새로 알게 된 것들도 있어 차차 글로 정리해야 할 것 같다. 개인적으로 제일 큰 소득은 react-query, useInfiniteQuery를 사용해 본 경험과 redux/toolkit에 대해 .. 2023. 2. 27. [React] React란? 리액트는 페이스북에서 개발한 오픈소스 자바스크립트 라이브러리이다. 기존의 웹 기술 HTML, CSS 등과 결합하여 사용할 수 있고, 자바스크립트만으로 뷰단을 개발할 수 있어 사용이 편리하다. 특징으로는 가상의 DOM을 활용하는 것과 컴포넌트 재사용성, 단방향 데이터 흐름 등이 있다. 가상의(Virtual) DOM은 사용자가 보고 있는 UI와 변경될 UI의 변경 사항을 체크하여 변경될 부분만 재조정할 수 있도록 메모리에 보관하고 있는 UI 사본이라고 할 수 있다. 변경된 부분만 재조정하기 때문에 불필요한 연산을 줄일 수 있다. 컴포넌트란 (공식 문서의 표현을 빌리자면) '작고 고립된 코드의 파편'이다. 하나의 화면을 구성할 때 여러 작은 컴포넌트를 섞어서 구성할 수 있고, 컴포넌트의 자식 컴포넌트를 생성하.. 2023. 2. 21. 이전 1 2 3 4 5 6 ··· 11 다음
