나디아 성장 일기

📌 useEffect : 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 컴포넌트의 사이드 이펙트(Side Effect)를 제어하는 React Hook 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것 ✨ 사이트 이펙트 (Side Effect) : 부수적인 효과, 파생되는 효과 (= 어떠한 동작에 따라 발생하는 효과) 📌 useEffect 구조 useEffect ( function, [deps] ) function: 실행하고자 하는 콜백 함수 deps: 의존성 배열 (검사하고자 하는 특정 값 배열) 👉 두 번째 인수로 전달한 배열[ ]의 값이 변경되면, SideEffect가 발생하여 첫 번째 인수로 전달한 콜백 함수를 실행시킨다..

라이프 사이클 (LifeCycle) : 프로그램의 실행부터 종료까지 시간의 흐름에 따른 단계적인 과정 Mount (탄생) : 컴포넌트가 탄생하는 순간 화면에 처음 렌더링 되는 순간 Update (변화) : 컴포넌트가 리 렌더링(Re-rendering) 되는 순간 UnMount (죽음) : 컴포넌트가 화면에서 사라지는 순간 렌더링에서 제외 되는 순간 📌 라이프 사이클 제어 : 라이프 사이클 단계 별로 컴포넌트들이 각각 다른 작업을 수행하도록 하는 것 useEffect를 이용하여 구현할 수 있음 출처 한입 크기로 잘라먹는 리액트

카운터(Counter) 만들기 📌 하나의 state를 여러 컴포넌트에서 사용할 경우, 공통 부모의 컴포넌트에 선언해야 한다. 형제 컴포넌트끼리는 state 공유 불가능 ❌ 📌 State Lifting (state 끌어올리기) : state를 계층 구조 위로 끌어올려서 아래에 있는 컴포넌트들이 모두 사용할 수 있도록 하는 방법 📌 데이터는 props를 이용하여 부모 컴포넌트 👉 자식으로 전달하여 사용 📌 카운터(Counter) 만들기 App.jsx (부모 컴포넌트) 현재 카운트 state 선언하기 count 버튼 기능 함수 생성하기 - 버튼을 누르면 현재 숫자인 count에 해당 버튼의 숫자인 value를 연산 Viewer.jsx App 컴포넌트에서 count state를 props로 가져오기 Contro..

React Hooks Hooks : class 컴포넌트의 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메서드 (ex. useState, useRef...) Hooks는 이름 앞에 접두사 use가 붙는다. 각각의 메서드는 Hook(훅)이라고 부른다. 📌 Hook의 특징 1. 함수 컴포넌트, 커스텀 훅(Custom Hook) 내부에서만 호출 가능 ⭕ 2. 조건부(조건문, 반복문)로 호출 불가능 ❌ 3. 나만의 훅(Custom Hook)을 직접 생성 가능 ⭕ 📌 Custom Hook 만들기 함수명 앞에 use 붙이기 (useXXX) 컴포넌트마다 반복되는 로직 + Hook을 이용하는 로직 👉 커스텀 훅으로 분리하여 사용하면 좋음 + hooks 파일에 별도의 이름으로 보관하는게 일반적이다. 출처 한입 크..

📌 useRef : DOM 요소에 접근하기 위해 새로운 Reference 객체를 생성하는 기능 Reference 객체는 컴포넌트 내부의 변수로 활동 DOM 요소 조작 가능 ⭕ 값이 변경되어도 리렌더링❌ ✨ 렌더링 시키고 싶지 않을 때 사용 생애 주기 내내 살아있다. 👉 Unmount(죽음) 전까지는 값을 그대로 유지할 수 있음 ⭕ 일반 변수: 두 컴포넌트가 하나의 변수를 공유하기 때문에 값에 혼란이 생김 useRef: 컴포넌트 별로 각각 다른 변수를 사용할 수 있음 📌 useRef 사용하기 1. import문으로 useRef 불러오기 import { useRef } from "react"; 2. useRef 변수 생성하기 const 변수명 = useRef(초기값); { current: 초기값 } 형태의 ..

State로 사용자 입력 관리하기 기본 구조 state 생성하기 입력값을 state값으로 저장하는 함수 생성하기 👉 의 value값을 상태 변경 함수(setXXX)을 통해 state값으로 변경한다. (setXXX(e.targert.value) 의 value값, 이벤트 핸들러(onChange) 설정하기 📌 state 초기값 설정하기 state 선언 시 state값(초기값) 설정 태그의 value값 설정 📌 state값(입력값) 다른 값으로 저장하기 value값을 다르게 설정하면 된다. 한국 📌 회원가입 폼 만들기 초기 버전 리팩토링 X 리팩토링 (refactoring) 버전 👉 State 리팩토링 state의 초기값으로 객체 넣기 const [input, setInput] = useState({ name:..

📌 State로 상태 관리하기  state: 컴포넌트의 상태를 의미하는 값   state 값이 바뀌면, react는 컴포넌트의 상태 변화를 감지해서 자동으로 컴포넌트를 리렌더링 👉 컴포넌트 값이 바뀌었을 때의 UI를 보여줌 * 리 렌더(Re-Render) / 리 렌더링(Re-Rendering) : 다시 렌더링 하는 것 (업데이트)    state는 한 컴포넌트 안에 여러 개 만들 수 있다.   useState 함수는 2개의 요소를 담은 배열을 반환한다.1번째 요소: 새로 생성된 state의 값 2번째 요소: 상태 변화 함수 (state 값을 변경하는 함수)     🔺함수 컴포넌트에서 state 생성하기 1. import로 내장 함수인 useState 불러오기import { useState } fro..

이벤트 핸들링(Event Handling) : 웹 내부에서 발생하는 사용자의 행동 (ex. 클릭, 입력, 스크롤 등) 📌 onClick : 클릭 시 행동하는 함수 case 1. 버튼 태그 안에 바로 함수 작성 { console.log(text); }} case 2. 변수에 저장 후 함수명만 사용 onClick엔 함수 이름만 설정해야 함 (onClickButton() 👉 ❌) const onClickButton = () => { console.log(text); }

props (propeties) : 부모 컴포넌트가 자식 컴포넌트에 전달한 값 부모 컴포넌트 👉 자식 컴포넌트만 가능 부모 컴포넌트에서 호출한 자식 컴포넌트에게 props를 부여하면, props는 객체로 묶여서 자식 컴포넌트의 매개변수로 들어간다. props를 통해 값에 따라 다른 UI를 보여줄 수 있다. case 1. 1. 컴포넌트의 매개변수로 props 전달2. {props.key}로 사용 // App.jsx function App() { return ( ) } // Button.jsx const Button = (props) => { return ( { props.text } ) }; export default Button; case 2. 1. 데이터를 객체{}로 묶고 2. Spread 연산자(....

JSX (JavaScript eXtenstions) : 확장된 자바스크립트 문법 변수 값 활용하기 { 변수 } 컴포넌트 내부에 변수를 선언하고, 그 변수의 값을 {중괄호}를 이용하여 html로 렌더링하도록 만들 수 있다. 📌 주의사항 1. {중괄호} 내부에는 Javascript 표현식만 넣을 수 있다. 숫자, 문자열, 삼항 연산자(? 조건문), 변수명 등 ⭕ if문, for문 불가 ❌ const Main = () => { const number = 10; return ( main { number % 2 === 0 ? "짝수" : "홀수" } ); }; 2. 숫자, 문자열, 배열 값만 렌더링 된다. boolean형, null, undefined 불가 ❌ { number % 2 === 0 ? "짝수" : "..