죽이죽이

key props가 필요한 이유 ※ 이유 - key props는 React가 어떤 항목을 추가, 제거, 변경 할지 식별할 수 있는것을 돕는다. (고유성 부여) - key props를 부여하지 않을 경우 React는 어떤 항목이 추가, 제거, 변경되었는지 식별하는데 어려움을 겪게 되고, 이로인해 불필요한 리렌더링이 일어날 수 있다. ※ 선택 조건 - default : key props를 명시해주지 않을 경우 index값을 사용한다. - 추천 : DB의 primary key와 같이 해당 아이템의 고유한 id값으로 지정해주는것이 좋다. ※ key값 지정

이미지 파일의 종류 이미지 용량에 따른 처리 ※ 용량에 따른 처리 - 용량이 9.7KB보다 작을 경우 base64 인코딩을 통해 문자열 형태로 바꿔서 보여준다. - 용량이 9.7KB보다 클 경우 별도의 가지고 있는 파일로 보여준다. (파일 경로 표시) React에서 이미지 파일을 가져오는 방법 ※ 폴더 구조 - case 1 : public 폴더 > img 폴더 > 이미지 파일들 - case 2 : src 폴더 > images 폴더 > 이미지 파일들 ※ 소스 코드 ※ 결과

Form Input ※ Form 데이터를 useState로 관리해줘야 하는 이유 - useState로 React에서 해당 상태를 관리할 수 있도록 해주지 않을 경우 사용자의 인터렉션으로 인한 input의 상태값이 바뀌더라도 리렌더링이 일어나지 않을수도 있다. ※ 예시 코드 import React, { useState } from "react"; import styles from "./Form.module.css"; export default function Form() { const [form, setForm] = useState({ id: "", password: "", passwordCheck: "", name: "", }); const handleForm = (e) => { const value =..

빌트인 훅이란? ※ 정의 - 빌트인 훅은 함수형 컴포넌트에서 클래스형 컴포넌트의 상태 및 생명주기와 같은 기능을 다룰 수 있도록 도와주는 특별한 함수들을 말한다. - React 16.8 버전에서 도입되었다. useState ※ 사용하는 이유 - 특정 컴포넌트 안에서 상태값을 관리할 때 사용한다. ※ 주의할 점 - props, state의 변경과 무관하게 부모컴포넌트가 리렌더링 될 경우 자식 컴포넌트도 무조건 리렌더링이 된다. useRef ※ 사용하는 이유 - DOM에 직접 접근해서 특정 값을 가져오는 등의 작업이 필요할 때 사용된다. (요소의 크기, 스크롤바 위치, 포커스 등) ※ 주의할 점 - useRef를 사용하면 참조하는 값이 변경되더라도 컴포넌트의 리랜더링이 발생하지 않는다. ※ 예시 import..

기본적인 프로젝트 폴더 구성 ※ node_modules : 프로젝트 구성에 필요한 모든 라이브러리들이 설치된 곳이다. ※ public : 정적인 파일들이 위치한 곳이다. - assets : 이미지 파일들을 저장하는 곳이다. - index.html : 프로젝트의 진입점이다. ※ src : 모든 소스코드가 위치한 곳이다. - api : 외부 API 호출 및 처리 관련 로직들을 넣어놓는 곳이다. - components : UI를 구성하는 모든 컴포넌트들을 넣어놓는 곳이다. - pages : 각 페이지에 해당하는 컴포넌트들을 넣어놓는 곳이다. - index.js : index.html과 마찬가지로 프로젝트의 진입점이다. ※ .env.local : 주로 환경변수를 선언할 때 사용하며, 로컬 환경에서만 사용된다. ..

React를 사용하는 이유 ※ 가상돔 사용 - 가상돔을 사용을하여 전체 페이지를 리렌더링 하지 않고 업데이트 된 부분만 리렌더링 하는 방식으로 조금 더 반응성 빠른 웹사이트를 보여줄 수 있다. ※ 컴포넌트 단위 개발 - UI를 컴포넌트 단위로 분리시켜 독립적으로 관리할 수 있다. - 반복적인 작업이 필요할 경우 해당 부분을 컴포넌트로 만들어 사용하는 방식으로 재사용성을 높일 수 있다. ※ 컴포넌트를 분리하는 기준 - 재사용성 : 특정 UI가 반복된다거나 여러곳에서 사용되는 경우 컴포넌트로 분리할 수 있다. - 관심사 분리 : 하나의 컴포넌트에서 너무 많은 기능을 담지 않고 컴포넌트 별로 목적이 하나씩만 있게 분리한다.

클로저란? ※ 정의 - 클로저는 함수와 그 함수가 선언되었을때의 렉시컬 환경의 조합으로, 내부 함수를 사용해 외부 함수의 범위에 접근을 할 수 있게 하는 기능을 제공한다. - 이런 기능을 사용해 전역 변수의 남용을 막을 수 있고 특정 변수의 값을 은닉하는 용도로도 사용할 수 있다. ※ 사용 방법 function outerFunction() { // 외부 함수의 지역 변수 let outerVariable = 10; // 내부 함수 (클로저) function innerFunction() { // 외부 함수의 변수에 접근 console.log(outerVariable); } // 내부 함수 반환 return innerFunction; } // outerFunction을 호출하고 반환된 함수를 변수에 할당 le..

일급 함수란? ※ 정의 - 프로그래밍 언어는 해당 언어의 함수들이 다른 변수처럼 다루어질 때 일급 함수를 가진다고 한다. - 예를 들어, 일급 함수를 가진 언어에서 함수는 다른 함수들에 전달인자로 제공되고, 다른 함수에 의해 반환될 수 있으며, 변수에 값으로서 할당될 수 있다. ※ 변수에 함수 할당 const fullName = () => { console.log("Daniel Son"); }; fullName(); // 변수를 사용해 호출 ※ 함수에 인자로 전달 function firstName() { return "Daniel"; } function lastName(firstName, lastName) { console.log(firstName() + lastName); } lastName(first..