클래스형 컴포넌트에서 생명 주기(life-cycle) componentDidMount, componentDidUpdate, componentWillUnmount를 사용하듯이, 함수형 컴포넌트에서 useEffect를 사용해봅시다. 1️⃣ 컴포넌트가 생성/소멸하는 모든 상황에 함수 실행하기 // 클래스형 컴포넌트 componentDidMount() { console.log("컴포넌트 생성 될 때 실행"); } componentWillUnmount() { console.log("컴포넌트 사라질 때 실행"); } // 함수형 컴포넌트 useEffect(() => { // componentDidMount console.log("컴포넌트 생성 될 때 실행"); // componentWillUnmount (clean..
Next.js는 React의 서버 사이드 렌더링(SSR)을 쉽게 하도록 도와주는 프레임워크입니다. React는 기본적으로 클라이언트 사이드 렌더링(CSR)입니다. CSR은 한 페이지만 화면에 띄웁니다. 그 후 사용자의 요청에 따라 필요한 부분만 다시 렌더링 합니다. 하지만 모든 정보를 처음에 다 불러오기 때문에 초기 로딩 시간이 길어집니다. SSR은 서버에서 필요한 페이지를 완성한 후 이를 브라우저에 보냅니다. 처음 렌더링 된 html만 브라우저에 보내기 때문에 초기 로딩 시간이 짧습니다. 하지만 페이지를 요청할 때마다 정보를 다시 불러 와서, 사용자가 페이지를 이동하는 시간은 더 오래 걸립니다. # 설치, 실행 npm install next npx create-next-app 1️⃣ Router 비교 ..
⚛️React란? React는 facebook에서 만든 JS 라이브러리로, component를 사용해 웹페이지를 효과적으로 렌더링(rendering)합니다. 무슨 소리냐 하면, 예를 하나 들어보겠습니다. 어느 사이트에 회원가입을 한다고 해봅시다. 이름이랑 아이디, 비밀번호, 비밀번호 확인, 닉네임, 이메일, 전화번호 등을 입력하고 가입하기를 눌렀습니다. '비밀번호가 일치하지 않습니다'라는 알림 창이 뜨네요. 아니 근데 알림 창의 확인을 누르는 순간, 화면이 새로고침 되면서 제가 채운 정보가 다 사라지는 겁니다. 이러면 사용자가 실수했을 때 모든 정보를 계속 다시 입력해야 합니다. 이런 불편함을 해결하기 위해 생각해낸 것이, 필요한 부분만 바꾸자입니다. 사용자와 정보가 오가면서 변화를 줘야 할 부분이 생기..
- Total
- Today
- Yesterday
- node.js
- Unsplash
- dfs
- 코어자바스크립트
- React.js
- 코딩테스트
- React
- python
- p5js
- 코테
- 동기
- 감시피하기
- 다이나믹프로그래밍
- 코드분석
- DP
- React-native
- 백준
- 파이썬
- Spotify
- backtracking
- rn
- 키워드밑줄
- Python3
- 비동기
- 프로그래머스
- 웅진IT
- 판례암기
- flutter
- 프로젝트
- fetch
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |