티스토리

코드노트

검색하기

블로그 홈

코드노트

codeno-te.tistory.com/m

코드노트 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

리액트 네이티브 절대 경로 지정 Feat. babel 리액트에서 utils, 컴포넌트, 페이지 들을 작업하면서 모듈로 작업을 했을때 ../../../ 경로를 절대경로로 하는 방법을 알아보자. 먼저 바벨 플러그인을 설치 babel-plugin-module-resolver Module resolver plugin for Babel. Latest version: 5.0.2, last published: 2 days ago. Start using babel-plugin-module-resolver in your project by running `npm i babel-plugin-module-resolver`. There are 1423 other projects in the npm registry using babel-plu www.npmjs.com npm i .. 공감수 0 댓글수 0 2024. 4. 20.
ref 여러개 하나의 ref로 관리, mergeRefs 함수 정리, feat, ForwardedRef 리액트를 하면서 useRef를 사용하며, 여러개의 Ref를 사용하게 된다면 어떻게 해야할까? 리액트 네이티브를 공부하면서 input을 컴포넌트로 관리하다가 Ref를 사용하여 다음 input으로 넘겨야했다. 하나의 refRef input컴포넌트 내에서 관리중이였고, 외부에서 컴포넌트에 Ref를 또 넘겨주어야했다. Ref를 2개를 사용할 수는? 있다. ForwardedRef를 사용하자. 더군다나 타입스크립트로 작업중이라면 머리가 더 복잡해질 수 있지만 이번에 컴포넌트를 만들면서 어느정도의 개념이 잡힌것 같다. mergeRefs 함수 function mergeRefs(...refs: ForwardedRef[]) { return (node: T) => { refs.forEach(ref => { if (ref &.. 공감수 0 댓글수 0 2024. 4. 18.
리액트 네이티브 TextInput 기능 정리, RN 현제 사이드프로젝트로 간단한 앱을 만들면서 TextInput으로 회원가입, 로그인을 구현하였다. 기능들이 기존 html input태그와 많이 달랐고 사용할 수 있는 속성들도 많았던거 같다. pwa도 진행을 해봤지만 역시 일반적으로 리액트로 진행하는것보다 네이티브가 좋은것 같다... 리액트 네이티브를 하면서 느낀거지면 모바일에 최적화되어있는것도 있지만 기본적으로 제공하는 속성들만 잘 활용하더라도 간단한 앱에서 사용하는것들은 구현하기가 쉬울것 같은 느낌..! onChangeText: 텍스트가 변경될 때마다 호출되는 함수를 설정 placeholder: 입력 필드에 표시되는 텍스트를 설정 placeholderTextColor: placeholder 텍스트의 색상을 설정 editable: 사용자가 텍스트를 입력.. 공감수 0 댓글수 0 2024. 4. 17.
리액트쿼리를 쓴다면 이건 꼭 알고 쓰자 현재 사이드 프로젝트를 진행하면서SWR을 사용해보자는 생각으로 시작했다.그렇게 리액트쿼리랑 조금씩 멀어지면서 느낀건 리액트쿼리 만한 라이브러리가 없다는 것... 프로젝트가 끝나가면서 팀원들과 디자인을 새로 변경해보자는 의견이 나왔고..새로 디자인 작업을 하면서 지금까지 만든 로직들을 전부 변경해야하는 일이 발생했다. 그렇게 api도 조금씩 수정해나가야했는데 그냥 리액트쿼리로 변경할까요? 라는 의견에 다른 프론트엔드 팀원도 좋다고하여 리액트쿼리로 다시 변경했다. 작업 전 리액트쿼리 공식문서를 다시 읽었다. 내가 모르는것들이 많았다...이번에 리액트쿼리 v5를 사용하면서 기존에 있었던 것들과 추가된 것들에 있어서 더 편하게 사용할 수 있는 기능들을 정리해보려고 한다.그리고 알고 넘어가야 하는것들도 같이..!.. 공감수 0 댓글수 0 2024. 3. 20.
리액트 가상돔 Virtual DOM 정리 리액트는 가상 돔을 사용하여 실제 돔에 업데이트 시킨다. 여기서 나오는 가상돔이 무엇인지 정리를 해보려고 한다. 리액트 Virtual DOM에 관련해서는 면접 질문에서도 자주 나오게 된다. Virtual DOM에서 DOM이 무엇인지 알아보자. DOM - DOM은 Document Object Model의 약어로 웹 페이지를 프로그래밍 언어가 이해할 수 있는 구조로 표현한 것이다. DOM은 문서의 구조를 트리 형태로 나타내는데. 이트리의 각 노드는 객체를 나타낸다. HTMl 문서가 웹 브라우저에 로드되면 브라우저는 HTML 태그들을 파싱하고 DOM 요소를 생성한다. 이렇게 생성된 DOM은 자바스크립트를 통해 조작이 가능하다. DOM API - 자바스크립트는 DOM API를 사용하여 웹페이지 내의 요소들을 선.. 공감수 0 댓글수 0 2023. 8. 4.
리액트 createPortal로 DOM추가하기 ReactDOM.createPortal(child, container) - createPortal은 리액트에서 DOM트리 의 다른 위치에 컴포넌트를 렌더링을 할 수 있는 기능 - 기본적으로 컴포넌트는 컴포넌트 트리의 노드로 렌더링이 되지만, 컴포넌트를 루트 DOM요소 밖의 다른 위치에 렌더링해야 할때 사용할 수 있다. - 간단하게 말하면 첫번째 인자는 자식요소, 두번째 인자는 자식요소를 렌더링할 DOM요소 ex) 모달, 툴팁, 독립적인 컴포넌트 등등 이번 프로젝트에서 모달을 사용하면서 css를 사용하여 z-index를 조절하여 모달을 만들었는데 createPortal을 사용하는것이 좋다고 한다. 아니 맞는것 같다. - 모달은 기존 컴포넌트 구조와 격리되어야한다. - 컴포넌트와 상호작용하는 문제가 발생할 .. 공감수 0 댓글수 0 2023. 8. 1.
Redux의 구조 정리, feat. Flux 패턴 리덕스는 전역 상태관리 라이브러리이다. 리액트쿼리, SWR, zustand, recoil 등 여러 상태관리 라이브러리가 있지만 기본으로 알고가야하는 라이브러리가 리덕스라고 생각한다. 리덕스의 구조와 Flux패턴에 대해서 정리를 해보려고 한다. 리덕스의 구조를 알아보기전 MVC패턴과 Flux패턴을 알아보자 MVC 패턴 MVC 패턴은 Flux 패턴이 등장하기전 사용되던 디자인 패턴이다. Model : 데이터 보관 및 정의 Controller : 데이터에 대한 수정, 조회 등의 역할 View : 데이터를 화면에 보여주는 역할 - Model에 데이터를 정의해 두고, Controller를 이용해서 Model 데이터를 생성, 조회, 수정, 삭제 등을 하여 변경된 데이터를 View에 출력하여 사용자들에게 보여줄 수 .. 공감수 0 댓글수 0 2023. 7. 24.
리액트(컴포넌트) 에러처리 ErrorBoundary ... class... JS에서 try/catch를 사용한 것 처럼 리액트에서 에러를 다루는 ErrorBoundary를 사용해보려고 한다. class문법으로 생긴걸 보고 정이 가지 않았지만.. 왜 ErrorBoundary를 사용해야할까? try/catch - 코드 블록 내에서 발생하는 오류를 처리한다. - 이벤트 핸들러, 비동기 코드, ssr 등등에서 try/catch를 사용한다. ErrorBoundary - 우리는 React를 통하여 컴포넌트를 사용하여 구현한다. 여기서 컴포넌트중 하나가 에러가 발생하게 되면? 한곳에서 발생하게 되는 에러때문에 App은 멈추게 될것이다. - try/catch를 사용했던것처럼 리액트에서는 Error Boundary를 통해서 에러를 핸들링 할 수 있다. - 쉽게말하면 렌더링 또는 하위 구성 요소.. 공감수 2 댓글수 1 2023. 4. 12.
REACT Hooks 노트 React.memo (feat.useMemo, useCallback) useMemo가 아니라 React.memo? memo는 useMemo만 있는게 아니였나.. 했지만 React.memo도 있었다.. 쉽게말하면 불필요한 컴포넌트 렌더링을 방지하는 훅! 그럼 useMemo와는 어떻게 다를까? React.memo와 useMemo, useCallback을 모두 정리해보려고 한다. useMemo const value = useMemo(() => { return 함수() }, [item]) ------------------------ const value = useMemo(() => { return 함수() }, []) - 첫 번째 인자는 콜백함수를 받는다. 두번 째 인자는 의존성 배열(Dependency)을 받으며, 두번째 인자인 배열의 요소의 값이 업데이트 될 때만 콜백 함수를.. 공감수 1 댓글수 0 2023. 4. 2.
REACT Hooks 노트 useReducer 정리 useReducer - useState처럼 State를 생성하고 관리할 수 있는 도구이다. - useState와 달리 여러개의 복잡한 상태관리가 필요할 때 사용하자 - 유지보수도 편하다! useState를 통하는 상태 관리... 여러 핸들러를 하나의 함수로 사용할 수 있다. 서로 연관되어 있는 복잡한 상태들을 하나의 객체로 관리할 수 있다. - 1개의 요소에서 여러가지 상태변화들을 관리한다면 useReducer를 사용하자 - 다른 상태값에 의존하여 상태값을 변경하는 경우에도 useReducer를 사용 하자 / 리덕스를 사용하자 const [state, dispatch] = useReducer(reducer, initialState); const [state, dispatch] = useReducer(re.. 공감수 1 댓글수 0 2023. 3. 16.
REACT Hooks 노트 custom hook (form control) 자바스크립트에서도 반복되는 로직들을 함수로 만들어서 사용했듯이 리액트에서도 컴포넌트 단위로 만들다보면 반복되는 로직이 발생한다. input Validation 같은 예를 볼 수 있을 것 같다. 이번에 진행중인 프로젝트중에서 form control 중에서 컴포넌트 안에 사용되는 함수가 많다보니 코드가 너무 길어졌다. 관련하여 custom hook를 적용해보는걸 기록해보려고 한다. 리액트 공식문서에도 form관련 라이브러리를 보여주지만 사용하는 값들을 반환해주는것들이 비슷하다보니 이해하고 넘어가면 도움이 될것 같다. 사용하는 방법은 간단하다. function use만들이름 () { // ... } - use를 앞에 붙여주고 함수이름을 만들면 리액트훅처럼 사용할 수 있다. Custom Hooks 사용전 코드 .. 공감수 0 댓글수 0 2023. 3. 13.
REACT Hooks 노트 useContext + Context API 정리 useContext - 데이터를 가지고 있는 상위 컴포넌트가 하위 컴포넌트에게 데이터를 전달해줄 수 있다. - 같은 데이터를 사용할때 컴포넌트마다 들고와서 사용하지 않아도 된다. - C, E가 만약 data가 필요하다면? 단계별로 하나하나 거쳐서 데이터를 전달해줘야한다. - A -> C \ B -> D -> E - useContext를 사용하면 단계별로가 아닌 바로바로 데이터가 필요한 컴포넌트로 전달을 해준다. props를 사용하면 되지 않냐고? - props를 여러개 전달한다면..? 컴포넌트들마다 단계별로 2중, 3중 ... 등으로 props를 전달한다고 생각해보자 - 혹시모를 수정에 있어서도 벌써부터 머리가 아파진다. - 내가 모르는 에러가 발생한다면? props를 사용한 컴포넌트들을 살펴보게 될것이.. 공감수 2 댓글수 1 2023. 3. 11.
REACT Hooks 노트 useEffect 정리 useEffect - 리액트 컴포넌트가 렌더링이 될 때, 될 때마다 특정 작업을 실행할 수 있는 리액트 hook이다. - mount : 화면에 첫 렌더링 - Update : 리렌더링 - Unmount : 화면에서 사라질 때 이 3개의 상황에서 useEffect 내부에 있는 코드가 실행된다고 생각하면 된다. - useEffect는 2개의 인자를 받는다. - 첫번째는 콜백함수, 두번째는 배열( [], dependency array )을 받는다. 그래서 일반적으로 두가지 사용법이 있다. useEffect(() => { }) - 컴포넌트가 화면에 처음 렌더링 될때, - 컴포넌트가 리렌더링이 될때 useEffect(() => { }, [value]) - 컴포넌트가 화면에 처음 렌디링이 될때, - [value]배열.. 공감수 0 댓글수 0 2023. 3. 8.
REACT Hooks 노트 useRef 정리 useRef - 값을 저장하는 공간 - State와는 다르게 값이 바뀌더라도 새로 렌더링이 되지 않는다. - State가 변화하여 렌더링이 되더라도 Ref의 값은 유지된다. 변경이 될때 값이 유지되어야한다면? useRef를 사용할 수 있다. useRef는 .current 프로퍼티로 전달되어 초기화된 변경 가능한 ref객체를 반환한다. const ref = useRef(value); {current: value} - 컴포넌트가 계속 렌더링이 되더라도 언마운트가 되기 전까지 값을 유지한다. useState 와 useRef의 차이점 See the Pen useState VS useRef by beomjunkwon (@bjkwon) on CodePen. - useState는 값이 변경이될때마다 바로바로 렌더링이.. 공감수 1 댓글수 0 2023. 3. 5.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.