나디아 성장 일기

📌 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", : 사용하지 않는 ..

📌 npm: node package manager   📌 라이브러리 설치하기1. npm로 설치하기npm i randomcolorpackage.json 파일의 "dependencies"에 라이브러리가 추가됨  2. import문 추가하기import 작명 from "라이브러리명";import randomColor from "randomcolor";const color = randomColor();console.log(color)  * 라이브러리 재설치npm ipackage.json/package-lock.json가 삭제되면 재설치하면 됨   📌 npx mrm gitignore: .gitignore 파일 자동으로 생성하는 명령어* .gitignore: 버전관리에서 제외하는 파일  📌 문법 검사 라이브러..

모듈 시스템 1. CJS (Common JS modul System) : Node.js에서 가장 일반적으로 사용되는 모듈 시스템 값 내보내기 module.exports = { 내보낼 값들(프로퍼티) } // math.js function add(a, b) { return a + b; } function sub(a, b) { return a - b; } module.exports = { add: add, // add라는 변수에 add()함수 저장 sub: sub, } 값 불러오기 require("./파일명"); // index.js const moduleData = require("./math"); // math 모듈러로부터 객체 형태로 내보내진 값을 반환함 console.log(moduleData); /..