나디아 성장 일기

카운터(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 ? "짝수" : "..

React 컴포넌트 (Component) 컴포넌트 (Component) : html 태그들을 반환하는 함수 보통 함수 이름을 따서 부름 (ex. function App( ... ) 👉 App 컴포넌트 컴포넌트 함수명은 반드시 첫 글자가 대문자여야 함 함수 표현식 function Header() { return ( Header ) } 화살표 함수 const Header = () => { return ( Header ) } 컴포넌트 계층 구조 컴포넌트는 계층 구조로 나타난다. 루트(root) 컴포넌트 : 모든 컴포넌트의 조상 역할을 하는 컴포넌트 원하는 대로 변경 가능하지만 보통은 App을 루트 컴포넌트로 둠 부모 컴포넌트 : 다른 컴포넌트의 호출을 품은 컴포넌트 자식 컴포넌트 : 다른 컴포넌트의 retur..

react 시작하기 react app 생성하기 npm create vite@latest vite 사용 * vite (비트) : 프론트엔드 개발을 위한 툴 Dev Server : 개발 환경에서 HMR과 같은 기능을 제공하는 개발용 서버 기능 Build : Production 배포를 위한 소스코드 번들링 기능 버전 확인하기 18.2.0 버전이 아니면 삭제 후 재설치해야 함 // package.json "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, 기존 라이브러리 재설치하기 npm i react 실행하기 npm run dev ESlint 설치 .eslintrc.js에서 옵션 수정 "no-unused-vars": "off", : 사용하지 않는 ..