Understanding React.js4 React Hook_useEffect Component의 Lifecycle 모든 Component는 1) 생성될 수 있고, 2) 재렌더링이 일어날 수 있고, 3) 삭제될 수도 있다. 1) ~ 3)의 사이클을 Component의 Lifecycle이라고 한다. React에서 Component의 Lifecycle이 중요한 이유는 Component의 Lifecycle 중간 중간에 간섭이 가능하기 때문이다. 예를 들어보자. 'A라는 Component가 등장하기 전에 이 것 좀 해줘' 'A Component가 사라지기 전에 저 것 좀 해줘' 'A Component가 업데이트 된 후에 그 것 좀 해줘' 이렇게 Lifecycle에 간섭이 가능하다. useEffect()의 기본적인 사용 Lifecycle Hook 중 하나가 바로 useEffect다. imp.. 2023. 4. 10. DOM에 직접 접근해야만 할 때 써야하는 useRef 1.ref란 무엇일까 일반적인 HTML에서 DOM 요소에 이름을 달 때 id를 사용한다. [code]일반적인 HTML에서 DOM요소에 접근하는 방법 이렇게 HTML에서 id를 사용해 DOM에 이름을 다는 것처럼 React 내에서 DOM에 이름을 다는 방법을 ref라고 한다. (*ref는 참조를 뜻하는 reference의 줄임말이다.) 2.useRef란 무엇일까 useRef는 앞에서 알아 보았던 ref를 함수 컴포넌트 안에서 쓰고 싶을 때 사용한다. 역시 React 내에서 DOM에 이름을 달아주는 방법이다. 이 글의 제목이 useRef니까 함수 컴포넌트 안에서 사용하는 useRef를 보도록 하자! 3.useRef는 React의 특성에 반하는 것이다? 리액트는 선언형 프로그래밍 라이브러리이다. 하지만 DOM.. 2023. 2. 22. [React] state & props 2 (What is props?) Props 의 특징 컴포넌트의 속성을 의미한다. 외부로부터 전달 받은 변하지 않는 값이다. 부모 컴포넌트로부터 전달 받은 값 리액트의 컴포넌트는 JavaScript의 함수와 클래스로 props를 함수의 전달인자(argument)처럼 전달 받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 REACT 엘리먼트를 리턴한다. 화면에 출력하고자 하는 데이터를 초깃값으로 사용할 수 있다. 객체(Object)타입이다. 어떤 타입의 값이라도 props로 전달할 수 있도록 props는 객체의 형태이다. props는 읽기 전용이다. 외부에서 전달한 바꿀 수 없는 값이기 때문에 props는 읽기 전용 객체다. Props의 사용법 props를 사용법 3단계 1. (하위 컴포넌트로)전달하고 싶은 값과 속성을 정의한다. 2.. 2023. 1. 27. [React] state & props 1 (What Is State?) 1. State란? 컴포넌트(파스칼 케이스로 정의된 함수 그 자체) 내에서 변할 수 있는 값(변경될 수 있는 값) 예시) 나이(1년 마다 변하므로), 결혼 여부(미혼 -> 기혼) 리액트에서는 이렇게 변경될 수 있는 컴포넌트를 State에 넣어서 관리한다. 쇼핑몰 구매 체크 목록을 예를 들어보자. 쇼핑 체크 목록에 구매할 물건의 개수나 구매 금액이 변경되고 이에 따라 사용자의 화면이 달라진다. 이처럼 컴포넌트 내에서 변할 수 있는 값(상태)은 state로 다루어주어야한다. import React, { useState } from "react"; import "./style.css"; const CheckboxExample = () => { const [isChecked, setIsChecked] = use.. 2023. 1. 26. 이전 1 다음
