나디아 성장 일기

☑ 체크박스 기능 체크박스가 클릭된 요소의 아이디(targetId)를 받아와서 todos state 값들 중 targetId와 일치하는 id의 todo를 찾아서 isDone 값을 변경 🔺App.jsx 체크박스 업데이트 함수 생성 체크박스가 클릭된 요소의 id(targetId)를 인수로 받아오기 todos state 배열에서 targetId(체크박스가 클릭된 요소의 id) === id가 일치하는 todo의 isDone 값을 바꾼 배열을 생성하는 함수 생성 state를 isDone을 바꾼 todo로 변경하기 위한 변경 함수 사용 일치하면 todo를 spread 연산자(...)로 풀어헤쳐서 isDone의 상태를 현재의 반대값으로 만든다. const onUpdate = (targetId) => { // 체크박스..

To-do List: 일정 추가하기 / 검색하기 📌 전체 컴포넌트 구조 🔺 App - 전체 🔺 Header - 제목, 날짜 표시 🔺 Editor - Todo 입력칸 🔺 List - 전체 Todo (TodoItem의 모음) 🔺 TodoItem - 개별 Todo 일정 추가, 수정, 삭제가 일어나는 컴포넌트 props를 바꿔가며 반복적으로 렌더링 📌 일정 추가하기 (+ 렌더링) 내용을 입력하고 추가 버튼을 누르면 todos state값을 변경해줘야 한다. 🔺 App.jsx 임시 데이터로 데이터 모델링 데이터가 어떤 형태로 있어야 하는지 설정 임시 데이터는 계속 렌더링할 필요 없으니 App 컴포넌트 밖에 선언 // 임시 데이터 (기본 데이터) - 계속 렌더링할 필요 없으니 App 컴포넌트 밖에 선언 const ..

📌 ref : 리액트에서는 DOM을 선택해 직접 접근하기 위해 사용 HTML 태그에 class나 id를 부여해서 사용하는 것처럼(), 리액트에서는 DOM을 선택해 직접 접근하기 위해 ref를 사용한다. (ex. 특정 input에 focus 주기, 스크롤 박스 조작, Canvas 요소에 그림 그리기 등) 🔺사용하기 useRef(React Hook)를 사용하여 ref 활용 useRef 선언하기 HTML 태그에 선언한 useRef 변수로 ref 부여하기 useRef 변수 사용하기 const Editor = ({onCreate}) => { // 1. useRef 선언하기 const contentRef = useRef(); const onSubmit = () => { // 입력칸이 공백인데 '추가' 버튼을 누르면..

React 개발자 도구 React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 47cf347e4 on 3/8/2024. chromewebstore.google.com 📌 설치 Chrome에 추가 크롬 점 3개 ➡ 확장 프로그램 ➡ 확장 프로그램 관리 React Developer Tools 세부정보 두 개 다 허용 on 오른쪽 상단의 퍼즐 모양 ➡ 확장 프로그램 등록 & 고정 >> 화살표 클릭 ➡ Components 확인 📌 기능 컴포넌트 확인 update 시 노란색으로 변경됨 출처 한입 크기로 잘라먹는 리액트

📌 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:..