React
-
[React] useState() 훅과 클로저React 2024. 5. 6. 16:14
결론부터 말하자면 useState는 리렌더링 되었을 때 이전 상태를 기억하기 위해서 클로저의 상태 유지 특성을 사용합니다.useState()의 구조useState는 상태를 관리할 수 있는 훅으로 아래와 같은 방법으로 사용 가능합니다. [state, setter] = useState(initialState) useState는 초기값으로 initialState을 받고, [state, setter]의 배열을 반환합니다.state는 상태를 나타내고 setter을 이용해서 state를 변경할 수 있습니다. useState() 동작 원리 useState() 사용 예시를 봐볼게요. useState(0) 호출 코드는 실행됩니다. state에는 초깃값 0이 할당됩니다. 클릭 이벤트를 통해서 handleClick() ..
-
React로 Scroll Reveal Animation 구현하고 컴포넌트화 하기React 2024. 4. 30. 14:36
저번 게시물에서 Scroll Reveal Animation을 React/Next.js로 구현하기 앞서 동작 원리를 알아보기 위해 JavaScript로 구현해 보았습니다. 이번에는 실제 프로젝트에 적용하기 위해 React로 구현하고 컴포넌트화 했습니다! JavaScript로 Scroll Reveal Animation 구현하기Next.js 로 프로젝트 중 토스 홈페이지를 보고 스크롤 이벤트 시 요소들이 여러 방향으로 나타나는 애니메이션을 프로젝트 소개 페이지(Intro Page)에 적용하고 싶었습니다. 그래서 React로 만들기에dev-ea-jung.tistory.com ✅ 구현하고 싶은 내용props로 animation direction을 받을 수 있는 컴포넌트를 만들려고 합니다. 애니메이션을 적..
-
React는 왜 등장하게 되었을까?React 2023. 12. 22. 14:59
🍎 목차 1. jQuery에서 React로 왜 건너갔을까? 2. SPA 장점 3. 틈새 Angular 설명 4. React의 등장 1. jQuery에서 React로 왜 건너갔을까? 페이지 전환 없이 앱 같은 느낌을 원하기 시작했습니다. (AJAX, ex. email) 한 페이지에서 다 하는 SPA(Single Page Application) 방식이 유행하기 시작했습니다. 예전에는 MPA(Multi Page Applicatioon) 였습니다. 2. SPA 장점 SPA는 한 페이지에서 내부 컨텐츠만 갈아끼는 식으로 동작하기 때문에 새로고침하거나 브라우저를 닫지 않는 이상 컨텐츠 데이터가 유지가 됩니다. MPA였을 때는 페이지를 이동할 때마다 데이터가 날아가 버려 백엔드 서버에서 데이터를 다시 받아와야 했지만..
-
브라우저 렌더링 과정을 이해하려면 DOM을 알아야 한다?React 2023. 12. 20. 22:24
🍎 목차 1. 브라우저의 렌더링 과정 2. DOM API 란? 3. 그래서 DOM 이 무엇인가? 4. Virtual DOM(가상 돔)은 무엇일까? React로 프로젝트를 하면서 메모이제이션 기법을 사용하여 렌더링 성능을 개선하게 되었다. 하지만 렌더링이라는 게 화면에 그려준다는 다소 추상적인 개념으로만 알고 있을 뿐, 정작 정확히 렌더링이 무엇인지에 대한 이해가 부족하다고 생각되어 공부하고 글로 정리하게 되었다. 1. 브라우저의 렌더링 과정 주소창에 url을 입력하게 되면 브라우저는 HTML, CSS, JavaScript 등 렌더링에 필요한 리소스들을 서버에 요청하게 됩니다. 서버에서 받은 리소스들은 브라우저의 렌더링 엔진이 파싱(해석, 구문 분석, syntax analysis)해서 렌더링 하게 됩니다...
-
Web App : 웹 개발자가 모바일 앱도 개발할 수 있을까?React 2023. 12. 14. 17:49
🍎 목차 1. 웹(Web) 이란? 2. 웹 앱(Web App) 이란? 3. 웹 앱(Web App)의 장점에는 뭐가 있을까? 4. 웹 앱(Web App) 사용 시 단점은 없을까? 5. 웹 앱(Web App)을 사용하는 서비스에는 어디가 있을까? 6. 웹 앱(Web App)에 대한 나의 생각 1. 웹(Web) 이란? 웹(Web) 이란 기기에 상관없이 브라우저 내에서 HTTP(Hypertext Transfer Protocol)를 사용하여 정보를 전송하고, URL(Uniform Resource Locator)을 통해 서비스를 이용 가능하게 하는 정보 공간을 말합니다. 2. 웹 앱(Web App) 이란? 웹 앱(Web App)은 모든 기기(컴퓨터, 휴대폰, 태블릿 등)의 웹 브라우저를 통해 앱과 유사한 화면을 보..