리액트 기초

React Hooks?

React Hooks 리액트 훅은 16.8에 추가되었다. 리액트 개발은 훅 이전이 old 한 방식이라면 훅 이후는 완전히 다른 모던한 방식이라 앞으로 리액트를 개발할려면 반드시 사용해야 할 기술이다. 함 규칙 function(함수형) 컴포넌트에서만 사용할 수 있다. 클래스 컴포넌트에서 hook을 사용하면 안된다. 또한 단순한 자바스크립트 펑션에서 hook을 사용해서는 안된다 Top level에서만 사용할 수 있다. 루프내에서나 혹은 내부 함수나 조건문에서 사용해서는 안된다. 반드시 리액트 함수형 컴포넌트의 top 레벨에서 사용해야 한다. 특징 completely opt-in 훅을 적용하고 싶으면 적용할 수 있고, 원하지 않는다면 적용안할수도 있는 선택 옵션이다. 100% backwards-compatib..

S3 설정 및 배포

S3? S3(Simple Storage Service)는 단순 스토리지 서비스이며 이미지나 파일을 저장할 수 있다. HTML, CSS, Js와 같은 정적 자원을 올리고, 정적 웹 사이트를 호스팅할 수도 있다. 우리가 컴퓨터에 폴더 만드는 것처럼 버킷을 만들고 사용할 수 있다. 정적 웹사이트? 웹 사이트는 서버 측 스크립트 사용 유무를 깆누으로 동적 웹사이트와 정적 웹 사이트로 나눌 수 있다. 서버 측 스크립트는 PHP, JSP, ASP와 같은 것들을 말한다. 정적 웹 사이트는 HTML, CSS, Js처럼 정적 자원으로만 이루어진 웹 사이트다. S3 버킷 설정하기 우선 가비아에서 도메인을 하나 구입하자. https://www.gabia.com/ 웹을 넘어 클라우드로. 가비아 그룹웨어부터 멀티클라우드까지 하..

SPA/라우팅

SPA and Routing Single Page Application. 서버에 넘기는 HTML이 하나뿐이 어플리케이션이다. 전통적인 웹 사이트는 페이지를 이동할 때마다 서버에서 HTML, CSS, JS (정적 자원)을 내려준다면, SPA는 딱 한번만 정적 자원을 받아온다. HTML을 하나만 주는 가장 중요한 이유는 사용성 때문이다. 페이지를 이동할 대마다 서버에서 주는 HTML로 화면을 바꾸면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오기 때문에 비효율적일 수도 있다. 하지만, 단점이 없는 것은 아니다. SPA는 딱 한 번만 정적 자원을 내려받다보니, 처음에 모든 컴포넌트를 받아온다. 즉, 사용자가 방문하지 않을 수도 있는 페이지까지 전부 가지고 온다. 더욱이, 한 번에 모든 페이지를 가지고..

부모 컴포넌트에서 자식 컴포넌트 함수 호출하기

Why use? 자식 컴포넌트에서 이벤트를 발생시키지 않고 부모 컴포넌트에서 이벤트를 발생시켜서 자식 컴포넌트의 이벤트를 발생시켜서 데이터를 가져오려면 어떻게 해야할까? 부모 컴포넌트에서 ref를 만들어서 자식 컴포넌트에게 props로 넘겨주면 되지 않을까? 하지만 리액트에서 특수한 prop인 key와 ref는 자식 컴포넌트에게 props로 넘겨줄 수가 없다. 이를 위해서는 몇 가지 hooks가 필요하다. React.forwardRef 리액트에서 특수한 props인 key와 ref는 자식 컴포넌트에게 props로 넘겨줄 수가 없다. HTML 엘리먼트가 아닌 React 컴포넌트에서 ref prop을 사용하려면 React에서 제공하는 forwardRef()라는 함수를 사용해야 한다. React 컴포넌트를 f..