이안의 평일코딩

React Hooks React Hooks는 ReactConf 2018에서 발표된 class없이 state를 사용할 수 있는 새로운 기능이다. Class Component로 사용되어온 React에서 느껴왔던 불편함이나 문제점들을 해결하기 위해서 개발되었다. 원래 React는 주로 Class Component를 사용하고 React Hooks는 Functional Component를 사용한다. 위와 같이, Class 컴포넌트와 비교했을 때 함수형 컴포넌트를 이용하면 더 간결한 코드, 더 빠른 성능, 더 나은 가독성을 가진다. 함수형 컴포넌트에서는 클래스 컴포넌트에서 사용하던 리액트의 생명주기를 사용하기 못했기 때문에, 함수형 컴포넌트가 더 간결하고 빠르더라도 클래스형 컴포넌트를 써왔지만, 이것은 Reac..

SPA(Single Page Application) public/index.html 템플릿 파일에서 div element의 id가 root로 되어있고, src/index.js 자바스크립트 시작점에서 root id를 가진 div element를 잡아준다. 그래서 element 안에서 화면을 꾸밀 수 있게 되는 것이다. index.html 템플릿이 하나면 한 개의 페이지 만들 때는 괜찮지만 두 개 이상의 페이지를 만들 때는? 원래 a 페이지를 만들면 a.html, b 페이지를 만들면 b.html 이런식으로 만들었다. 위와 같은 방식이 전통적인 웹 사이트를 만들 때 사용하는 Multi Page Application이다. 하지만 요즘에는 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 ..

리액트는 프레임워크가 아닌 라이브러리 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해 주로 사용된다. 다른 Tool인 Vue나 Angular와 많이 비교하지만 가장 큰 차이점은 프레임워크인 두 언어와 달리 React는 라이브러리라는 점이다. 간단하게 보면 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것이고, 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것이다. 즉, 프레임워크는 라이브러리를 포함하고 또한 우리가 작성한 소스 코드를 호출한다. 그리고 소스 코드는 어떠한 기능을 구현하기 위해 라이브러리를 호출하게 된다. 프레임워크는 앱을 만드는데 필요한 대부분의 라이브러리를 가지고 있고, 라이브러리들은 특정 기능을 위해 모듈화 되어 있다. 리액트가 라이브러리인 이유는 전적으로 U..

첫 클래스라 인원이 2명밖에 안되었지만, 그래도 코로나 시국에 맞게 소수인원으로 잘 마쳤습니다. https://iancoding.tistory.com/252 [2021.06] 이안의 월간코딩 - 리액트 웹 사이트 3시간 컷 2021년 6월 이안의 월간코딩은 5일(토) 오전 10시부터 오후 1시까지 진행됩니다. 이런 걸 배워요! - 웹 사이트 구조잡기 - @material-ul/icons import 해오기 - map함수 사용하기 - Router(Link) 이용.. iancoding.tistory.com 장소가 협소한 탓에 길음점이 아닌 성신여대점으로 위치를 옮겨서 진행하였고, 시간은 9시부터 13시까지 진행하였지만 프로젝트에는 정확히 3시간이 소비되었습니다. 클래스 진행 순서 1. 프로젝트 생성, 환경설..

2021년 6월 이안의 월간코딩은 5일(토) 오전 10시부터 오후 1시까지 진행됩니다. 이런 걸 배워요! - 웹 사이트 구조잡기 - @material-ul/icons import 해오기 - map함수 사용하기 - Router(Link) 이용하기 - useState 활용하기 리액트 입문자 누구나! - 참가비 무료 - 개인용 노트북 지참 - 3시간 만에 리액트 웹 사이트 완성 - 위 포스터 QR코드 찍고 참가 여부 확정

헤더 스크롤 시 디자인 변경 Vue에서 제작한 코드를 React로 변환하는 작업 중인데 코드가 달라서 리액트 버젼으로도 올려본다. iancoding.tistory.com/216 [Vue] 스크롤 시 헤더 색 변경 1. 먼저 data에 scrollPosition을 null값으로 넣어준다. 2. updateScroll()이라는 메소드를 통해 현재 윈도우의 스크롤 위치를 scrollPosition에 저장한다. 3. mounted를 통해 위의 updateScroll()이 발생하도록.. iancoding.tistory.com Vue는 위의 블로깅을 참조. Header.js import React, {useState, useEffect} from 'react'; import "./css/Header.css"; fu..

react-reveal 꽤 유용한 사이트다. 간편하게 애니메이션을 구현할 수 있다. www.react-reveal.com/ Home - React Reveal React Reveal React Reveal is high performance animation library for React. It's MIT licensed, has a small footprint and written specifically for React in ES6. It can be used to create various cool reveal on scroll effects. Scroll down to see it in action. www.react-reveal.com 먼저 터미널에 아래와 같이 입력하여 설치한다. npm in..

리액트 이미지 경로 보통 public에 이미지들을 다 집어넣고 쓰는 편인데 정말 간편한 방법이 있어 공유하고자 한다. 먼저 public에 img라는 폴더를 만들어준다. 그리고 src에서 작업하는 곳에서 이미지를 불러올 때 경로를 img/를 넣으면 아주 쉽게 불러온다. import React from 'react'; import "./Card1.css"; function Card1() { return ( ) } export default Card1; 간단하쥬?