開發時習之

useRef란? - 특정한 요소의 id처럼 활용 할 수 있고 변수를 만드는 것에도 사용할 수 있는 리액트 훅이다. 사용방법 1. 변수선언시 useRef(초기값)를 이용한다. const 변수명 = useRef(초기값) 2. 특정 jsx요소에 ref={변수명} 형태로 할당해준다. 3. 변수에 접근은 변수명.current를 통해서만 가능하다. 사용예제 1. 로그인 화면예제 import React, { useRef } from 'react'; function UseRef() { const userId = useRef(''); const userPw = useRef(''); const login = () => { console.log(userId.current.value); console.log(userPw.cu..

이벤트 처리 브라우저 이벤트(이벤트 핸들러) 리액트에서 이벤트 함수를 만들 때 아래와 같은 규칙이 있다. 1. jsx 형태로 {} 안에 이벤트 핸들러를 명시한다. 2. 이벤트 핸들러는 () 없이 함수명만 (즉, 함수 그 자체를) 명시한다. 3. 카멜 케이스를 사용하여 이벤트 속성을 명시한다. 4. 함수를 실행할 때, 인자를 전달하면서 실행하고 싶다면 화살표 함수 형태로 작성한다. (화살표 함수를 작성하는 것은 함수를 실행하는 것이 아니라 정의하는 것이기 때문이다.) 클릭하면 alert 이벤트 활용 아래 코드는 이벤트 핸들러를 활용해서, button 을 클릭하면 메뉴가 표시되고 다시 클릭하면 닫히는 컴포넌트이다. 1. 클릭여부를 저장하는 state를 만든다. 2. 해당 state 값을 토대로 요소를 표시한..

React의 생명주기 react의 component에는 생명주기가 있는데 컴포넌트가 표시되고 사라지는 순간까지를 말한다. 컴포넌트가 실행되거나 업데이트되거나 제거될 때, 특정한 이벤트들이 발생한다. mount (컴포넌트가 표시될 때) → update (컴포넌트 내부의 요소가 업데이트될 때) → unmount (컴포넌트가 사라질 때) useEffect 는 위 3가지 시점중 하나를 골라서, 해당 시점에 특정한 함수가 실행되도록 하는 Hook이다. 1. mount useEffect(컴포넌트가 표시될 때 실행할 함수, []) 화면이 로딩되고 나서 3초 뒤에 변수의 값이 변하는 예제 import React, { useState, useEffect } from 'react' function Loading() { c..

자바스크립트에서의 불변성이란? - 원시형 (string, number, boolean 등) 데이터들은 모두 불변성을 유지한다. (값이나 상태를 변경할 수 없는 것) let a = 1; let b = a; //깊은 복사 b = 2 console.log(a) //1 - 원시형 데이터들은 복사가 이루어질 때, 그 값 자체를 복사해서 새로운 메모리 주소에 할당한다. a → 0x000001 (메모리 주소) - 1 (값) b → 0x000002 (메모리 주소) - 1 (값) - a 변수를 b 에 복사한 이후에, b 를 수정해도 a 가 변경되지는 않는다. - 수정된 b 자체 또한 새로운 메모리 주소에 값이 할당된다. (b 수정 후) a → 0x000001 (메모리 주소) - 1 (값) 0x000002 (메모리 주소)..

React의 작동원리 Single Page Application - 하나의 html 파일만 보여주고, 내부의 요소는 모두 자바스크립트를 활용해서 변경시키는 것 - 페이지가 변경될 때마다 무조건 새롭게 html, css 파일을 표시해야했던 예전 방식보다 훨씬 효율적! Virtual Dom with Diff Algorithm - React 는 가상으로 html 요소들을 생성하고 (가짜 DOM), 현재 화면에 표시되는 html 요소들 (진짜 DOM) 과 비교해서, 달라진 부분만 다시 그리는 방식으로 렌더를 진행 요소가 달라질 때마다 새롭게 화면을 다시 그리는 것이 아니라, 달라진 부분만 알아서 React 가 다시 그려줌 Component - React 는 component 라는 것을 작성해서, 조합하는 방식으..