스터디 (37) 썸네일형 리스트형 #4. 변수 1. 변수란 무엇인가 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름. 즉, 값의 위치를 가리키는 상징적인 이름 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 제공한다. 개발자가 메모리 주소를 통해 값에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 높기 때문에 자바스크립트는 이러한 개발자의 직접적인 메모리 제어를 허용하지 않는다. 변수는 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 할당 : 변수에 값을 저장하는 것 참조 : 변수에 저장된 값을 읽어 들이는 것 참조를 요청하면 자바스크립트 엔진은 변수 이름과 매핑.. #3. useTitle hook useTitle 문서의 제목을 업데이트 시켜주는 걸 담당하는 hook import { useEffect, useState } from "react"; const useTitle = (initialTitle) => { const [title, setTitle] = useState(initialTitle); const updateTitle = () => { const htmlTitle = document.querySelector("title"); htmlTitle.innerText = title; }; useEffect(updateTitle, [title]); return setTitle; }; const App = () => { const titleUpdater = useTitle("Loading...").. #2. useTabs hook useTabs 특정 element를 탭 하면 원하는 특정 내용만 보여줄 수 있는 기능 import { useState } from "react"; const content = [ { tab: "Section 1", content: "I'm the content of the Section 1" }, { tab: "Section 2", content: "I'm the content of the Section 2" }, ]; const useTabs = (initialTab, allTabs) => { if (!allTabs || !Array.isArray(allTabs)) { return; } const [currentIndex, setCurrentIndex] = useState(initialTab); ret.. #1. useInput hook useInput 기본적으로 input을 업데이트 하는 Hook const useInput = () => {}; import "./styles.css"; import { useState } from "react"; const useInput = (initialValue) => { const [value, setValue] = useState(initialValue); const onChange = (event) => { console.log(event.target); }; return { value, onChange }; }; export const App = () => { const name = useInput("youngseo"); return ( Hello CodeSandbox ); }; export.. #0. Introduction # 목표 : 우리의 hooks library를 build 하기 - useTitle : react document의 title을 몇 개의 hooks와 함께 바꿈 - useInput : input의 역할 - usePageLeave : user가 page를 벗어나는 시점을 발견하고 함수 실행 - useClick : element를 클릭하는 시점을 발견하고 함수 실행 - useFadeIn : 어떤 Element든 상관없이 FadeIn 애니메이션을 적용함 - useHover : 어떤 Element 위에 마우스를 올렸을 때를 감지함 - useFullscreen : 어떤 Element든 fullscreen으로 만들거나 일반 화면으로 돌아가게 함 - useNetwork : online인지 offline 상태인지 감지함.. 이전 1 2 3 4 5 다음
