아는게 없어서 쓰는 블로그 아는게 없어서 쓰는 블로그

생명주기 함수 2번째 시간 ~ [React] 리액트 입문 - 생명주기 함수 사용하기 (생성 과정) 생명주기란( in react ): component의 생성, 변경, 소멸 과정을 뜻한다 ~ ! 더보기 앞서 배웠던 리액트에서 component를 App.js에 import하여 화면에 rendering하였다. import React from 'react' export default function R004_Lif 0lrlokr.tistory.com 앞서 우리는 생명주기 함수 중 '생성'하는 함수들을 살펴보고 왔다 이번 포스팅에서는 생명주기 함수 중 '변경'하는 함수인 shouldComponentUpdate()함수에 대해서 알아보겠다 ! 이 때 '변경'이란 props나 state의 변경을 말한다. App.js ..

생명주기란( in react ): component의 생성, 변경, 소멸 과정을 뜻한다 ~ ! 더보기 앞서 배웠던 리액트에서 component를 App.js에 import하여 화면에 rendering하였다. import React from 'react' export default function R004_LifecycleEx() { return ( R004_LifecycleEx ) } 방식이 아니라 render()함수를 사용하여 html 코드를 return 하는 방식에 대해서 자세히 알아보겠다 필자는 앞선 방식에 익숙해서 render함수 배움의 필요성을 느껴서 접은 글에 언급해본다. rfc+enter에 대해 알지 못하는 분들은 혼란을 피하기 위해 넘어가는 것이 좋을 것 같다 ! component의 생성 ..

집나간 리액트가 돌아왔다 ~ 유후 오랜만에 리액트 포스팅.. 리액트를 처음 하시는 분들이라면 다음 링크를 참고하여 개발환경을 구축하시길 바란다 ! [리액트 실습] 영화 앱 만들기 2 (리액트 개발환경 구축) [리액트 실습] 영화 앱 만들기 1 (tmdb api 발급) 1. 실습 영상 찰스님의 실습 영상을 보고 공부했다 !! 따라가기도 쉽고 설명도 잘해주셔서 도움이 많이 된 실습이었다 . 2. 완성된 페이지 상영중인 0lrlokr.tistory.com 지금까지 jsx를 이용한 리액트를 사용해보았다면 js문법 리액트부터 차근차근 다루어보겠다. 리액트 → 자바스크립트 → 리액트 기초 순서로 이상하게 배우고 포스팅하고 있긴한데 저는 선샌님들을 믿습니다. 자 그럼 ~ 개발환경이 모두 구축된 상태에서 ! creat..

*유튜브 인브로즈님의 실습 영상을 참조하여 작성한 포스팅입니다. [리액트 실습] 로그인 화면 만들기 0 (React Hooks - useEffect, useState ) * 유튜브 인브로즈님의 실습 영상을 참조하여 작성한 포스팅입니다. 드디어 영화 앱 실습 포스팅을 끝내고 '로그인 화면 만들기' 포스팅을 가져왔다. 우선 개발에 앞서 이번 포스팅에서는 리액 0lrlokr.tistory.com 이번 포스팅에서는 Login컴포넌트의 뼈대를 잡아보려한다. useState, useEffect와 같은 함수는 쓰이지 않을 예정이며 리액트의 CSS, HTML의 기초적인 부분에 대해 다루어볼 것이다. 1. 뼈대잡기 우선 create-react-app을 활용하여 login-review 디렉토리를 만들어주었다. (복습 겸 ..

* 유튜브 인브로즈님의 실습 영상을 참조하여 작성한 포스팅입니다. 드디어 영화 앱 실습 포스팅을 끝내고 '로그인 화면 만들기' 포스팅을 가져왔다. 우선 개발에 앞서 이번 포스팅에서는 리액트 Hooks에 대해서 '간단히' 다루어보겠다. 추후에 hooks의 많은 함수를 공부하고 Hooks를 자세히 정리해서 작성해보도록 하겠다. 1. React Hooks Hooks - 리액트의 새로운 기능 : React 16.8 버전에 새로 추가 - function 컴포넌트에서도 state를 관리할 수 있다. - React의 여러 기능을 함수형 프로그래밍으로 사용할 수 있다. - lifecycle(라이프 사이클, 생명 주기)를 사용할 수 있다. Hook의 개요 – React A JavaScript library for bui..

* 유튜브 인브로즈님의 실습 영상을 학습한 뒤 작성하는 포스팅입니다. [리액트 실습] 간단 영화 앱 만들기 6 (헤더 만들기) [리액트 실습] 간단 영화 앱 만들기 5 (React Routing) [리액트 실습] 간단 영화 앱 만들기 4 (1-3 코드) [리액트 실습] 간단 영화 앱 만들기 3 (components와 props) [리액트 실습] 영화 앱 만들기 2 (리액트 개 0lrlokr.tistory.com 아마 간단 영화 앱 만들기는 7편을 마지막으로 끝나지 않을까 싶다. 하지만 필자가 좀 더 배워서 TV프로그램 , 등장인물 등등 여러 페이지를 만들 수 있는 능력과 글을 쓸 수 있는 여유가 된다면 다시 돌아오도록 하겠다 .. 이번 포스팅에서는 이렇게 영화가 정렬된 화면에서 영화 화면을 누르면 클릭한..

[리액트 실습] 간단 영화 앱 만들기 5 (React Routing) [리액트 실습] 간단 영화 앱 만들기 4 (1-3 코드) [리액트 실습] 간단 영화 앱 만들기 3 (components와 props) [리액트 실습] 영화 앱 만들기 2 (리액트 개발환경 구축) [리액트 실습] 영화 앱 만들기 1 (tmdb a 0lrlokr.tistory.com 5에서 이어진다 ~ 이번 포스팅에서는 '헤더'부분에 대해서 코드를 짜 볼 예정이다. 아마 마켓컬리 클론코딩 헤터 포스팅과 유사한 부분이 많을 것이다. [리액트 실습] 마켓컬리 클론코딩 1. 헤더 만들기 3주차 과제는 ~~~ 마켓컬리 클론 코딩이다 ! 3주차에서는 SPA, routing에 대해서 배웠다. React Routing - Rising Camp 12th..

[리액트 실습] 간단 영화 앱 만들기 4 (1-3 코드) [리액트 실습] 간단 영화 앱 만들기 3 (components와 props) [리액트 실습] 영화 앱 만들기 2 (리액트 개발환경 구축) [리액트 실습] 영화 앱 만들기 1 (tmdb api 발급) 1. 실습 영상 찰스님의 실습 영상을 보 0lrlokr.tistory.com 헤더 + 상세페이지가 있는 앱을 만들어볼 예정이다. 1. SPA vs MPA 이번에는 지난번까지 만들었던 간단 영화 앱에서 최신 영화 목차에서 더 나아가 클릭하면 영화의 일부 정보가 뜨는 '상세 페이지'와 페이지 이동까지 만들어 볼 예정이다. 리액트에서는 페이지 이동을 위해 react-route-dom을 활용한다. ** react-route-dom : SPA방식의 애플리케이션에..