전체 글

[React-Hooks] React Hooks - useRef

* useRef 특정 DOM 선택하기 JavaScript 를 사용 할 때 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있다. ex) 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정 그럴 때 리액트에서 ref 라는 것을 사용한다. * useRef 예시 코드 import { useRef } from "react"; const App = () => { const input = useRef(); setTimeout(() => input.current...

[React-Hooks] React Hooks - useTitle

* useTitle 보통 Title을 수정하기 위해서 Helmet라이브러리를 이용하는데 hook을 이용하여 functional hooks방식으로 만들어 볼 예정 titleUpdater는 useTitle의 함수를 사용하며 매개변수로 "Loading..."를 받고있다. updateTitle에 의해서 title의 값이 할당되며 useEffect를 이용해서 title이 변경될때마다 updateTitle을 실행시켜준다. const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); ..

[React-Hooks] React Hooks - useTab

* useTab button을 클릭하였을때 보여지는 내용을 다르게 보여주는 기능 const content = [ { tab: "first button", content: "click first button" }, { tab: "second button", content: "click second button" } ]; * map함수를 이용하여서 button을 만들어준다. const App = () => { return ( { content.map((section) => { return ( {section.tab} ) }) } ); }; * useTab hook (전체코드 및 사용 되는 흐름) const content = [ { tab: "first button", content: "click first ..

[React-Hooks] React Hooks - useInput

* useInput useInput은 기본적으로 input을 업데이트 한다. useInput은 initialValue(초기값)를 parameter로 받는다. const useInput = (initialValue) => { const [value, setValue] = useState(initialValue); } * useInput을 이용하여 값 지정 하기 const useInput = (initialValue) => { const [value, setValue] = useState(initialValue); return { value }; } const App = () => { const name = useInput("Hyeonwoo"); return ( Hello ); }; useInput은 ini..

[Git] gh-pages로 사이트 배포하기

[작업환경 및 package] React 환경에서 작업을 진행 gh-pages를 이용 * gh-pages를 install해준다. npm install gh-pages yarn add gh-pages * 아래의 사진처럼 package.json 하단에 "homepage"를 추가해준다. https://나의 git ID.github.id/나의 repo 이름 * package.json안의 scripts부분에 deploy를 추가해준다. "deploy" : "gh-pages -d build" (참고) build를 하고 deploy를 해야한다. build를 하고 deploy하기 귀찮으니 predeploy(deploy하기전 행동)를 이용하여 deploy가 되었을때 자동으로 build가 될 수 있도록 한다. * React..

[TypeScript_study] Pick & Omit & Exclude & NonNullable

* Pick T에서 원하는 K만 골라서 사용한다. interface User { id: number; name: string; age: number; gender: "M" | "W"; } const admin: Pick = { id: 0, name: "Bob", }; * Omit - 특정 property를 생략하고 사용 가능 - age, gender property는 제외되고 나머지가 사용된다. interface User { id: number; name: string; age: number; gender: "M" | "W"; } const admin: Pick = { id: 0, name: "Bob", }; * Exclude - T1의 type들 중에서 T2 type과 겹치는 부분을 제외하고 사용하는 ..