나도 공부한다/React16 리액트 파이버를 알아보자 리액트 파이버란?JSX는 페이스북이 만든 임의의 문법이기 때문에 JS 표준이 아니다. 그렇기 때문에 JSX문법을 포함한 리액트 코드는 JS엔진이 이해할 수 있도록 babel과 같은 트랜스파일러를 통해 ECMAScript로 변환되는데, 이 때 react.createElement() 호출이 반환된다. 이해를 돕기 위해 예시 코드를 첨부한다.const MyComponent=( Today )// ECMAScript로 변환var MyComponent=React.createElement( 'div', null, React.createElement('span', null, 'hello world'),) 이렇게 반환된 element를 DOM에 반영하기 전에 먼저 가상DOM에 .. 2025. 1. 15. 리액트의 동시성 렌더링에 대해 알아보자 (리액트 인터뷰 가이드 5장 보충) 서론참고서에 동시성 렌더링 내용이 아주 조금 써있었는데 궁금해서 더 알아봤다. 등장 배경기존 렌더링 방식의 문제렌더링을 시작해서 화면에 그리기까지 실행을 멈출 수 없었음리액트 변경 비교 알고리즘이 매우 빨라서 보통은 멈춰도 상관X. 하지만 연산이 길어진다면?→ 프레임이 드롭되고 입력은 한참 후에 예약되면서 좋지 않은 사용자 경험 제공 ex)여기서 프레임이 드롭된다는 것은 특정 순간에 리소스 로드, 연산 처리 등으로 화면이 평균 프레임 이하로 떨어졍서 끊기는 듯한 현상을 말한다. 디테일이 높은 게임을 해본 사람이면 한번쯤 경험해봤을 현상이다.위 링크를 타고 들어가서 입력을 빠르게 해보자. 처음에는 괜찮은데 그려야될 네모가 많아질 수록 버벅거리며 심지어 화면이 일정시간동안 멈추기도 한다. 이를 해결하기 위한.. 2024. 11. 5. 리액트 라우터를 알아보자 (리액트 인터뷰 가이드 4장 보충) 서론 리액트 인터뷰 가이드라는 책으로 스터디를 시작했는데 아무래도 책이 얇다보니 보충 공부를 많이 해야한다. 사실 남들은 다 아는건데 나만 몰라서 이렇게 느끼는 걸지도? 아무튼 앞으로도 보충공부한 내용을 기록해보려고 한다. 틀린 부분이 있으면 언제든 댓글 달아주세요! 이번 장은 라우터 이론이었는데 인강으로 리액트 공부할 때 사용 방법만 배워서 책 내용이 조금 어렵게 느껴졌다. 1. 리액트에서 라우터, 라우팅, 라우트란?Routingurl과 매칭되는 특정 페이지를 보여주는 기능모든 자식 라우트를 검색해 가장 적합한 항목을 찾고 해당 UI 분기를 렌더링함 Router정의 페이지나 컴포넌트 간에 이동할 수 있는 라이브러리. 리액트 자체에서는 라우팅 기능을 제공하지 않기 때문에 라이브러리를 사용해야한다.라우터를.. 2024. 10. 29. 프레그먼트를 알아보자 처음 리액트를 사용해본 사람들은 한번쯤 JSX expressions must have one parent element 에러를 겪어봤을 것이다.하나의 부모 요소만 반환해야하는데 여러개의 형제 요소를 반환하고 있기 때문에 발생하는 에러다.function MyComponent() { return ( Title Hello );} 이 때 아무 의미없는 로 감싸주기도 하는데, 프레그먼트를 사용해야 성능 측면에서 더 좋다.그 동안 아무 생각없이 와 를 번갈아가며 쓰던 날을 반성하며 글을 시작한다. 먼저 프레그먼트에 대해 알아보자. 이 내용을 이해하려면 DOM 구조를 어느 정도 알고 있어야한다. 정의DOM에 노드를 추가하지 않고도 리액트 컴포넌트에 자식 요소 목록을 래핑하거나 그룹화할 수 있는 구문 사.. 2024. 10. 23. React 파일 업로드시 확장자 제한하기 (input accept에 의존하면 안되는 이유) 문제 상황분명 이렇게 accept로 제한해뒀는데... 다른 파일도 잘 업로드 되는 문제가 발생했다. 해결 과정accept 속성은 브라우저에서 사용자가 파일 선택 대화상자를 통해 선택할 수 있는 파일 유형을 제한한다.따라서 처음에 파일 업로드 버튼을 눌렀을 때 나오는 파일창에서는 형식이 '사용자 지정파일(accept로 설정해둔 형식들)'로 제한되어있다. 하지만 이렇게 사용자가 형식을 '모든 파일'로 바꿔버리면 accept 설정이 소용없어진다. TCPschool에서도 accept 속성을 유효성 검사를 도구로 사용해서는 안 되며, 업로드된 파일은 서버에서 검증되어야 한다고 써놨다. 결과따라서 이렇게 클라이언트쪽에서 확장자를 직접 검사하는 함수를 만들거나, 서버에서 특정 파일만 받을 수 있게 처리해야한.. 2024. 5. 19. React "too many re-render" 문제 해결 목적 관리자 모드로 로그인 시 사이드바에 '신고관리' 메뉴가 추가되도록 만들고 싶었다. 문제 아래처럼 코드를 짜니 감당하기 힘들 정도로 많은 리렌더링이 일어난다는 에러가 떴다. if (isAdmin == 'ROLE_ADMIN') setItems((prevItems) => [ ...prevItems, { name: '신고관리', path: `/space/admin/report` }, ]); 해결 컴포넌트는 state가 변경되면 리렌더링 되는데, 이렇게 바디에 setState를 사용하게 되면 setState가 읽혀 리렌더링이 일어나고, 리렌더링이 일어나면 setState가 또 읽혀 리렌더링이 발생하고... 리렌더링을 무한 반복하게된다. 따라서 특정 조건에서만 setState가 호출되도록 useEffect와 .. 2024. 2. 1. 이전 1 2 3 다음
