목록TIL (28)

SOOM_BLOG [숨숨 블로그]

ref

기본 역할은 다른 DOM요소로 접근해서 작업할 수 있게 해주는 역할이다. 선언한 useRef 변수를 HTML요소의 ref prop을 통해 연결할 수 있으며, uesRef 변수로 연결한 HTML요소에 접근할 수 있다. uesRef 변수는 항상 current 속성을 가지고 있는 객체를 반환한다. 💡 ref 를 사용해보자 useRef hook을 사용하기 위해 import해주자. (함수형 컴포넌트에서만 사용 가능) import React, { useRef } from "react"; useRef 변수를 선언하자. const nameInputRef = useRef() const ageInputRef = useRef() 선언한 useRef 변수를 HTML요소와 연결하자. Age (Years) key prop과 마찬..
TIL/react 2022. 1. 22. 03:43
제어/비제어 컴포넌트

제어 컴포넌트 React에 의해 값이 제어되는 입력 폼 엘리먼트. (react와 상태가 연결되어 있는지 확인!) const ControlComponent = (props) => { const [enteredUserNm, setEnteredUserNm] = useState(""); const [enteredUserAge, setEnteredUserAge] = useState(""); .... const onChngNameHandler = (e) => { setEnteredUserNm(e.target.value); }; const onChngAgeHandler = (e) => { setEnteredUserAge(e.target.value); }; return ( ) } 비제어 컴포넌트 ref를 사용하여 DO..
TIL/react 2022. 1. 22. 03:39
Return root level

둘 이상의 'root' JSX 요소를 반환할 수 없다. (변수에 둘 이상의 'root' JSX 요소를 저장할 수도 없다) 하나의 요소만 가질 수 있다. 물론 children은 더 가질 수 있다. 왜 하나의 요소만 저장하거나 리턴할 수 있을까? 자바스크립트에서는 하나 이상 리턴할 수 없기 때문!! return ( Hi there! This does not work :-( ) ⬇️⬇️⬇️ return ( React.createElement('h2', {}, 'Hi there!') React.createElement('p', {}, 'This does not work :-(') ) 💡 여러 요소를 리턴 하고 싶은 경우엔 어떻게 할까? 1) 하나의 배열 값으로 리턴하자. (요소 마다 key 지정 필요.) ret..
TIL/react 2022. 1. 21. 16:57
[Javascript] EVENT LOOP란? (feat. 코딩애플)

EVENT LOOP란? (부제:브라우저 동작 원리) 자바스크립트를 누가 실행시켜주낭? 브라우저!(엔진) console.log(1+1) setTimeout(fumction(){console.log(2+2)}, 1000) console.log(3+3) JS에서 결과는? 2, 6, (1초 쉬고)4 !코드 위에 적든 밑에 적든 빠른거부터 실행해준다! 그렇다면 js는 병렬처리가 가능한가??? NO!!!! 그렇다면 브라우저 동작 원리를 알아보자. Heap : 참조 타입들이 할당되는 곳이다. 콜 스택과 달리, Heap의 메모리 할당은 LIFO 정책을 따르지 않고 랜덤하게 배치된다. 또한 메모리 누수를 방지하기 위해 JS 엔진의 메모리 관리자가 항상 관리한다. Stack : js코드를 진행해주는 곳. 싱글스레드이므로 ..
TIL/js 2022. 1. 20. 11:08
이전 Prev 1 2 3 4 5 Next 다음