FE/react17 [React] 서버 사이드 렌더링이란? 본 글은 도서의 내용을 바탕으로 작성되었습니다. 싱글 페이지 애플리케이션(SPA) SPA란 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식을 의미한다. SPA는 첫 페이지에서 데이터를 모두 불러온 후에는 서버에서 HTML을 내려받지 않고 하나의 페이지에서 모든 작업을 처리한다. 이러한 작동 방식은 최초에 로딩해야 할 자바스크립트 리소스가 커지는 단점이 있지만 한번 로딩된 이후에는 서버를 거쳐 리소스를 받아올 일이 적어져 훌륭한 UI/UX를 제공할 수 있다는 장점이있다. 페이지 전환을 시도하면 서버로 HTML을 요청하는 것이 아닌 다음 페이지 렌더링에 필요한 정보만 HTTP요청으로 가져온다음, 그 결과를 바탕으로 내부에 DOM을 추가, 수정, 삭제하는 방법으로 .. 2024. 2. 2. [React] useState, useEffect, useRef 본 글은 도서의 내용을 바탕으로 작성되었습니다. useState useState는 함수형 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이다. import { useState } from 'react' const [state,setState] = useState(initialState) 초기값을 넘겨주지 않으면 초기값은 undefined가 된다. useState없이 변수를 이용해 상태값을 관리하려고하면 렌더링을 트리거시키지 못하거나, 강제 렌더링을 시킨다고 해도 값을 다시 초기화시켜 값을 변경시키지 못한다. 그럼 useState훅의 결과 값은 어떻게 함수가 실행되어도 그 값을 유지하고 있는지에 대한 의문이든다. 아마 useState는 state값을 기억하기 위해 클로저로 구현되어.. 2024. 1. 28. [React] 리액트 렌더링 과정 본 글은 도서의 내용을 바탕으로 작성되었습니다. 리액트 렌더링이란? 브라우저 렌더링: HTML과 CSS리소스를 기반으로 웹페이지에 필요한 UI를 그려내는 과정 리액트 렌더링: 브라우저가 렌더링에 필요한 DOM 트리를 만드는 과정 리액트 애플리케이션 트리 안에 있는 모든 컴포넌트들이 현재 자신들이 가지고 있는 props와 state의 값을 기반으로 어떻게 UI를 구성하고 이를 바탕으로 어떤 DOM 결과를 브라우저에 제공할 것인지 계산하는 일련의 과정을 뜻한다. 리액트 렌더링이 일어나는 경우 최초 렌더링 리렌더링 클래스형 컴포넌트의 setState가 실행되는 경우 클래스형 컴포넌트의 forceUpdate가 실행되는 경우 함수형 컴포넌트의 useState()의 두번째 배열요소인 setter가 실행되는 경우 함.. 2024. 1. 14. [React] 언제 어떻게 state와 useEffect를 사용해야할까? 들어가며 인턴 1~2주차에 react state management에 대한 과제를 받고 피드백을 받았다. 해당 글은 그 첫번째 과제에서 실수했던 점과 배운점을 정리한 내용이다. 첫번째 과제는 user가 text를 입력하는 동시에 글자수, 문장수 등을 동시에 계산해서 보여주는 간단한 앱이였다. 혹시 동일한 과제를 직접 수행해보고 싶다면 아래 글을 참고하면 되겠다. https://www.codevertiser.com/reactjs-challenge-1-text-analyzer-tool/ 피드백 이전 코드 귀찮더라도 위 앱 캡쳐사진과 코드를 한번 읽어보면서 이 코드가 잘못된 점이 어딘가를 생각해보자. const App = () => { const textRef = useRef(null); const [text.. 2023. 10. 13. [React] 스크롤 특정 요소로 이동하기 스크롤이 있는 페이지에서 특정요소로 이동해야하는 경우가 있습니다. 가령 채팅을 구현할 때는 메세지가 추가될 때마다 추가된 요소에 스크롤이 고정되어야하는 경우가 대표적인 예입니다. 저희 프로젝트에서는 글을 작성할 때 사진을 10개까지 추가할 수 있는데, 사진을 추가할 때마다 스크롤이 맨 뒤에 위치해서 사진 추가버튼이 항상 유저에게 보이도록 하고 싶었습니다. 구현 방법 element.scrollIntoView를 활용하면 원하는 element로 스크롤을 이동시킬 수 있습니다. MDN에서 소개하고 있는 JS에서의 활용 방법입니다. 포커싱하고 싶은 요소를 getElementById로 불러옵니다. behavior같은 옵션을 통해 스크롤을 부드럽게 내리기 등의 설정을 추가할 수 있습니다. 자세한 내용은 MDN을 참고.. 2023. 6. 1. [React] 토스트팝업/스낵바(toast popup/snack bar)직접 구현하기 1차 배포 후 알파테스트를 진행하고 있는데, 제목과 내용이 빈 채로 글이 작성된다는 사실을 발견했습니다. 내용을 필수 입력하도록 설정을 해놓았는데 공백만 입력하는 경우를 고려하지 않았던 것이죠... 글 작성 시 공백으로만 글을 쓸 수 없게 만들고, 그 사실을 유저에게 알려야하는데 로그인 validation 에러메세지 방식으로 하기엔 UI가 좀 어색하다는 생각이 들어서 toast pop-up을 고려하게 되었습니다. (잠시... 기말고사 기간 동안 디자이너분께서 공부를 하러가셨으므로... 직접 어색하지않은 토스트 팝업을 뚝딱뚝딱 만들어 보았습니다. 용도에 따라 배경색을 다르게 쓰는게 좋은데 그건 디자이너 분과 상의해봐야하므로 우선 메인컬러를 사용했습니다.) 토스트 팝업(toast pop-up) / 스낵바(s.. 2023. 5. 24. 이전 1 2 3 다음
