SOOM_BLOG [숨숨 블로그]

Effect (= Side Effect) 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위 (ex. APP내에서 고려되는 모든 사항들 : 브라우저 저장소에 저장된 데이터를 백엔드 서버에 HTTP 요청 보내기, 타이머 설정 및 관리 등) ➡️ 이러한 작업은 특히 렌더링을 차단/지연할 수 있으므로 일반적인 컴포넌트 평가 및 렌더링 주기 외부에서 발생해야 한다. React에서는 Side-Effect 처리를 위해 useEffect()함수를 제공 useEffect() hook useEffect(() => {...}, [dependencies]) 첫번째 인수 : 지정된 종속성이 변경된 경우, 모든 구성 요소 평가 후에 실행해야 하는 함수 두번째 인수 : 이 effcet의 종속성(배열) - ..

기본 역할은 다른 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과 마찬..

제어 컴포넌트 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..

둘 이상의 '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..

HTML 태그 정의 및 특징 태그는 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용. 태그는 metadata(정보에 대한 정보를)제공하는 역할. 요소는 , , , , 요소와 같은 다른 메타데이터 관련 요소들이 나타낼 수 없는 다양한 종류의 메타데이터를 제공할 때 사용되며, 이렇게 제공된 정보는 브라우저나 검색 엔진, 다른 웹 서비스에서 사용하게 됨. 태그는 항상 태그 내부에 위치해야 함 태그는 보통 name과 value 쌍으로 사용됨.(name 속성이나 http-equiv 속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 하며, 반대로 두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없음.) HTML5에서는 요소를 통해 웹 페이지에서 사용자가 볼 수 ..

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코드를 진행해주는 곳. 싱글스레드이므로 ..