개발 🐾

useEffect 📍useEffect의 특징리액트 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 하는 hook (컴포넌트가 나타날 때, 사라질 때)useEffect 생성 후, Import 필수state가 변경될 때마다 리-렌더링이 일어나서 useEffect가 계속 실행됨=> 의존성 배열로 막을 수 있음📍의존성 배열 이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행시킴Trigger : useEffect의 동작을 이끌어내는 어떠한 변수 (배열에 들어가는 값)의존성 배열이 빈 배열일 경우 : 최초 렌더링 이후 딱 한 번만 실행, 그 이후에는 어떤 일이 일어나도 실행 X 📍clean upuseEffect의 return 문에 들어가는 함수리소스 정리, 불필요한 메모리 누수를 방지하기..

useState setState에 값을 직접 넣어도 되지만 함수를 넣어 함수형 업데이트를 구현할 수 있다.// 기존에 우리가 사용하던 방식setState(number + 1);// 함수형 업데이트 setState(() => {}); 차이점(기존)값 : 여러 명령을 모아서 한 번에 실행(+1을 100번 해도 +1만 됨)함수형 : 여러 명령을 모아서 순차적으로 실행(+1을 100번 하면 +100이 됨)부모-자식 컴포넌트에서 state를 변경하려면?count와 setCount를 넘겨주는 방법setCount만 넘겨주는 방법 1. 불필요한 props전달setCount(count + 1);  2. 함수형을 사용하기setCount(prev => prev + 1);

CSS in JS 📍리액트에서 css 적용법인라인 스타일css 파일 작성 후 className으로 적용CSS in JS 📍CSS in JS 란?자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식style을 적용할 때 조건문, 변수 등 다양한 로직을 이용할 수 있다. styled-components📍styled-components 란?리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀수 있게 도와주는 패키지 📍styled-components 설치 및 사용VSCode 내 확장프로그램 설치yarn으로 styled-components 설치하기 (터미널)yarn add styled-components 기본적인 사용 방법꾸미고자 하는 컴포넌트를 SC의 방식대로 먼저 만들고, 그 안에 스타일 ..

문제  이름 나이 이메일 확인  빈 곳을 채우면 된다.1, 2, 4는 완성했지만 3번에서 막혔다!  문제 풀이1. 이름, 나이, 이메일 중 하나라도 입력되지 않은 경우: alert "모든 정보를 입력해주세요."submitBtn.addEventListener("click", function () { if(nameInput.value === "" || ageInput === "" || emailInput === ""){ alert("모든 정보를 입력해주세요."); } 입력한 값은 변수명.value를 통해 을 가져올 수 있다.값이 공백인 경우는 ""로 나타낼 수 있다.하나라도 입력되지 않은 경우는 or(||)로 표현할 수 있다.(true || false || false ..

데이터 타입과 연산자에 대한 교육 후 실습 문제 8개를 풀었다. 문제 감소 1 증가 아직 완성되지 않은 부분을 추가하면 된다.  문제 풀이1. const로 button과 span 태그를 지정해준다.- class이기 때문에(".")을 이용한다.const plusBtn = document.querySelector(".plus-btn");const minusBtn = document.querySelector(".minus-btn");const number = document.querySelector(".number");  2. 증가 로직을 구현한다.- addEventListener 를 통해 버튼을 "클릭"했을 때 함수를 구현하게 한다.plusBtn.addEventListener("click", func..

리액트 기능을 구현하다가 들은 생각useState의 정확한 기능은 무엇이며, 왜 쓰는 걸까?리액트에서 useState의 역할 📍useState란?'state'라는 것을 만들어 주는 함수이다.  📍state란?변경가능한 데이터를 다루는 변수이다.state에 할당된 값이 변하면 그와 관련된 컴포넌트(화면을 구성하는 블럭)들이 재렌더링 된다. 일반 변수는 값은 바꾸어도 화면을 재렌더링 하는 기능은 없다.state는 리액트에서 단순한 변수가 아닌 변화하는 값에 따라 화면에 반영되도록 연결되어있다. 즉, state를 사용하는 이유는리액트에서 state가 화면을 재렌더링 하는 역할을 하기 때문이다.  📍useState 형태 분석const [ name, setName ] = useState(초기값); 위의 형식..

Props 📍props란?컴포넌트 간의 정보 교환 방식부모 → 자식에게 데이터(객체 형태)를 전달하는 구조.📍특징단방향 데이터 흐름: 반드시 부모 → 자식 방향으로만 전달된다.읽기 전용: props는 수정하지 않고 전달받은 그대로 사용한다. 📍사용 형태전달하기 (부모 컴포넌트):return ; // props로 'name'을 전달받기 (자식 컴포넌트):function Child(props) { console.log(props); // 전달받은 props 출력 return 연결 성공;}   State 📍state란?컴포넌트 내부에서 바뀔 수 있는 값.UI 반영을 위해 값이 변해야 할 때 사용.'hook' 이라고도 한다.📍State 생성 방법useState()를 사용하여 state를 선언..

useState와 이벤트 핸들러를 이용한 카운터 앱 만들어보기 실습 구현해야 할 기능 App.jsx에 코드를 작성한다.+ 1 버튼을 누를 때마다 숫자가 +1 증가한다.- 1  버튼을 누를 때마다 숫자가 - 1 감소한다. 💡버튼을 누르면 State가 변경되면서 화면이 리렌더링 되는 형식   기능 구현하기 📍기본 형식App.jsx의 기본 형식을 준비한다.* rafce 입력더보기두 개의 확장 프로그램을 설치하여 단축키를 사용할 수 있다.import React from "react";const App = () => {return App}export default App;  📍구현 단계 1. 초기값이 0인 number라는 State 만들기* useState를 import 하기import React, { us..

1. 리액트 컴포넌트란?리액트 컴포넌트는 함수다.컴포넌트는 화면에 어떻게 표현될지를 정의하며, React 엘리먼트를 반환한다.1-1. 함수형 컴포넌트 예시// props라는 입력을 받아 React 엘리먼트를 반환function Welcome(props) { return Hello, {props.name};}// 간단한 예시function App() { return hello;}   2. 리액트 실습 내용2-1. 컴포넌트 만들기컴포넌트를 만들 때 반드시 가장 첫 글자는 대문자로 만들어야 한다.폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트를 만드는 파일은 대문자로 시작하는 카멜케이스로 이름을 짓는다.자바스크립트를 HTML 안에서 사용할 때 {} 중괄호를 사용한다.=> 리턴문 이하에 자바스크립트..

논리 연산자를 사용하여 조건문을 처리할 때전체 표현식을 평가하지 않고 최소한의 평가로 결과를 도출하는 방식을 말한다. 단축 평가는 주로 && (논리곱), || (논리합), ?? (null 병합 연산자)를 사용할 때 발생한다. 논리합( || ) 연산자논리합 연산자 ||는 좌변의 피연산자가 falsy 값(false, 0, "", null, undefined, NaN)일 때만 우변의 피연산자를 평가한다.좌변의 피연산자가 truthy 값일 경우, 그 값이 바로 결과값으로 반환되며, 우변은 평가되지 않는다. 쉽게 설명하자면 A || BA가 false라면 B를 반환하고,A가 true라면 B는 무시, A에 맞는 값을 반환한다. +) falsy한 값 : false, 0, "", null, undefined  📍예시/..