React

인프런 - 처음 만난 리액트리액트란 무엇인가?➡️ 리액트 : 화면을 만들기 위한 기능을 모아놓은 것 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리사용자 인터페이스(UI) : 사용자와 컴퓨터 프로그램이 상호작용 하기 위해 입력과 출력을 제어라이브러리 : 자주

인프런 - 처음 만난 리액트HTML웹 사이트의 뼈대를 구성하기 위해 사용되는 마크업 언어각 페이지 별로 html 파일 존재Tag SPA하나의 페이지로 복잡한 웹 사이트 표시CSScss의 속성을 사용하여 스타일 을 바꿀 수 있음html : 뼈대, css : 스타일Java

인프런 - 처음 만난 리액트리액트란 무엇인가?➡️ 리액트 : 화면을 만들기 위한 기능을 모아놓은 것 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리사용자 인터페이스(UI) : 사용자와 컴퓨터 프로그램이 상호작용 하기 위해 입력과 출력을 제어라이브러리 : 자주

인프런 - 처음 만난 리액트리액트란 무엇인가?➡️ 리액트 : 화면을 만들기 위한 기능을 모아놓은 것 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리사용자 인터페이스(UI) : 사용자와 컴퓨터 프로그램이 상호작용 하기 위해 입력과 출력을 제어라이브러리 : 자주

솔로스타의 React 렌더링Render: 함수가 호출 되는 것Commit: 반환된 객체 (virtual DOM)이 Real Dom에 반영되는 것그렇다면 개발자가 해야하는 일은 무엇일까?➡️ 함수 작성만 하면 나머지는 전부 React가 해줌 (함수 호출도!!)Tree 구

리액트 특징컴포넌트 기반의 구조모든 페이지가 컴포넌트로 구성하나의 컴포넌트는 다른 여러개의 컴포넌트의 조합으로 구성 가능➡️ 레고 블록 조립하듯이 컴포넌트들을 모아 새로운 컴포넌트 생성 가능⭐️ 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성⭐️ 이러한 컴포넌트들이 모

리액트 특징컴포넌트 기반의 구조모든 페이지가 컴포넌트로 구성하나의 컴포넌트는 다른 여러개의 컴포넌트의 조합으로 구성 가능➡️ 레고 블록 조립하듯이 컴포넌트들을 모아 새로운 컴포넌트 생성 가능⭐️ 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성⭐️ 이러한 컴포넌트들이 모

Function Component➡️ 하나의 props 객체를 받아서 인사말이 담긴 element 반환➡️ 간단한 코드Class Component➡️ react.component를 상속받아서 만듬!!Component 이름은 항상 대문자로 시작실제로 화면에 렌더링 되지는

: 리액트 컴포넌트의 상태리액트 컴포넌트의 변경 가능한 데이터개발자가 직접 정의렌더링이나 데이터 흐름에 사용되는 값만 state에 포함그렇지 않은 값은 컴포넌트의 인스턴스 필드에 저장javascript 객체직접 수정하면 안됨!! ➡️ setState 함수 사용!!\++

: 원하는 시점에 정해진 함수가 실행되도록 하는 것 \++ Component➡️ function component가 class component와 동일한 기능 사용할 수 있도록 해줌: state를 사용하기 위한 Hook➡️ function component에서는 sta

💡 Hook의 규칙1\. 무조건 최상위 레벨에서만 호출해야한다.➡️ 반복문 중첩문 등의 안에서는 호출x➡️ 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 함2\. 리액트 함수 컴포넌트에서만 호출 (자바스크립트xx): 리액트에서 기본적으로 제공되는 훅 이외에

: 특정 사건 ex) 버튼 클릭 등💡 DOM의 Event➡️ onclick 사용➡️ 이벤트 처리할 함수를 문자열로 전달💡 React의 Event➡️ onClick 사용➡️ 이벤트 처리할 함수를 함수 그대로 전달💡 Event Handler = Event Listen

: 조건부 렌더링➡️ 어떠한 조건에 따라 렌더링이 달라지는 것➡️ 조건문 (true/false에 따라 렌더링 달라짐)➡️ 회원인지 아닌지에 따라 (t/f에 따라) 다른 함수 리턴💡 Truthy / Falsy: true는 아니지만 true로 여겨지는 값: false 아

: 사용자로부터 입력을 받기 위해 사용➡️ 사용자가 입력한 값에 접근하고 제어하기엔 어려움💡 Controlled Components: 사용자가 입력한 값에 접근하고 제어할 수 있도록 하는 컴포넌트➡️ 값이 리액트의 통제를 받는 input form element➡️ 모

: 하나의 데이터를 여러개의 컴포넌트에서 표현해야 하는 경우 ➡️ 공통된 부모 컴포넌트를 공유해서 사용!!💡 Shared State : State에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우➡️ 하위 컴포넌트가 공통된 부모ㅋ 컴포넌트 state

: 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것= 합성💡 여러개의 컴포넌트들을 어떻게 조합할 것인가?Containment: 하위 컴포넌트를 포함하는 형태의 합성 방법➡️ childeren이라는 prop을 사용해서 조합Specialization: 특별화💡

: 컴포넌트의 props를 통한 데이터 전달➡️ 어떤 컴포넌트여도 데이터에 쉽게 접근 가능➡️ 자주 쓰는 페이지에서는 여러번 사용 ex) C 쓰려면 두번이나 내려가야함 -> props -> propsex)➡️ props로 전달할 필요 없이 데이터를 필요로 하는 컴포넌트

리액트 완벽 가이드 - 유데미

벨로퍼트와 함께하는 모던 리액트리액트 공식 문서1 - 예전리액트 공식 문서2 - 현재HTML, CSS, JS를 분리된 파일로 관리하였다.동적으로 내용을 결정하는 경우가 많아지며 JS가 HTML을 담당하게 되었다.(이것이 React 컴포넌트에서 렌더링 로직과 마크업이 같

.jsx는 브라우저에서 지원되지 않는 파일 확장자이다. 이것이 작동할 수 있는 이유는 리액트 프로젝트에서 이 특별한 확장자를 지원하기 때문이다. 따라서 .jsx 확장자는 개발 서버가 실행될 때 빌드 프로세스에게 해당 파일이 JSX 코드를 포함하고 있다는 것을 알려주는

리액트는 기본적으로 Javascript로 UI를 동적으로 렌더링하지만, 정적 콘텐츠는 React 외부에서 미리 정의하는 것이 효율적이다.따라서 이 프로젝트에서는 header 를 React 외부에서 index.html에 작성한다.이 코드에서 header는 로고 이미지와

리액트 컴포넌트의 상태를 관리하기 위한 훅이다.상태가 변경되면 컴포넌트가 리렌더링된다.즉, 값이 바뀔 때 화면에 즉시 반영된다.✔️ useState 사용input에 값을 입력하면 setEnteredPlayerName으로 상태를 업데이트한다.handleSubmit 호출

align-itmes 속성의 tailwind 버전이다.items-start → align-items: flex-start (자식 요소들을 세로축의 시작 부분에 정렬)items-center → align-items: center (자식 요소들을 세로축의 가운데에 정렬)i

동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 때가 있다.이럴 때는 가장 가까운 공통 부모로 state를 끌어올려야 한다.하지만 컴포넌트들이 복잡해지고 자식 요소, 자식의 자식 등 겹겹이 쌓이면 상태를 관리하기가 어려워진다.이 때 발생하는 문제점이 Pro

side effect란 부수효과라는 뜻으로, 필요는 하지만 렌더링이 될 필요가 없는 부분을 말한다.useState 를 사용하여 상태를 관리하면 값이 바뀔 때마다 해당 컴포넌트가 리렌더링된다.이렇게 되면 다시 컴포넌트가 실행되고, 위치 값이 또 바뀌므로 또 렌더링 ..

자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있다.두개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리한다.컴포넌트와 Hook 또한 함수이기 때문에 같은 방법을 사용할 수 있다.사용자 정의 Hook은 이름이 use

폼 제출 ( 난이도 쉬움)양방향 바인딩을 통한 상태 관리refs(참조) 를 사용한 값 추출브라우저가 제공하는 함수를 이용하여 데이터 추출 (formData 객체)유효성 검사키를 입력할 때마다 검사 → 너무 빨리 경고포커스 되어있을 동안 검사 → 너무 오래 경고폼 제출

📌 백엔드 연결 (fetch) 비동기 함수 백엔드 서버와 연결을 하려면 시간이 걸리므로 async & await 을 사용하여 비동기 함수로 처리하는 것이 좋다. 왜 useState를 사용했을까? meals 는 백엔드에서 가져온 데이터를 저장하기 위한 상태이다. 백

📌 라우팅 라우팅이란? 라우팅은 사용자가 요청한 URL을 분석해 그 요청에 맞는 자원을 반환하거나 특정 동작을 수행하도록 연결하는 과정이다. 주로 웹 애플리케이션에서 클라이언트가 특정 URL로 접근하면 서버나 프론트엔드가 이에 대한 응답을 처리하기 위해 라우팅을 설정

Tanstack Query란? HTTP 요청을 전송하고 프론트엔드 UI와 백엔드 데이터가 동기화된 상태로 유지하는데 이용하는 라이브러리이다. ❗️반드시 필요한 것이 아니라 useEffect / fetch 를 사용하여도 된다. 하지만 Tanstack Query를 사용하

🔥 Prography https://prography.org/ 부트캠프가 끝나고 새로운 프로젝트를 하고 싶어 동아리를 찾아보던 중에 Prography 라는 동아리를 발견했다. 사전 과제, 면접을 통해 심사가 이루어지는데 내가 지원한 Web 파트의 사전과제는 Prog

<form> 태그의 action 속성은 폼을 제출했을 때 데이터를 전송할 서버의 URL을 지정하는 역할을 한다.리액트 19 부터는 서버 액션이라는 새로운 기능이 도입되면서, 기존의 event.preventDefault() 를 사용해서 JS 로 폼 제출을 처리하던

요즘 정말 많은 상태 관리가 있는데, 어떤 상태 관리 방식이 적절한지, 내가 상태 관리 방식에 대해 잘 알고 있는지에 대해 정리를 해보고자 이 글을 작성하게 됐다 !!React에서 상태(State)란 UI의 데이터나 특정 값들을 저장하고 관리하는 개념이다. 하지만, 애

Tanstack Query 공식 문서웹 애플리케이션에서 서버 상태를 패칭, 캐싱, 동기화 및 업데이트 하는 작업을 아주 쉽게 해준다.간편한 데이터 관리데이터 가져오기, 캐싱, 동기화, 업데이트 처리를 간편하게 할 수 있게 해준다.실시간 업데이트 및 동기화실시간 데이터

🔗 최초 진입뷰 성능 최적화프로젝트를 진행하던 중, 초기 진입 페이지의 로딩 속도가 너무 느리다고 느껴졌다. 첫 화면이 뜨기까지 시간이 오래 걸리다 보니 사용자가 페이지를 이탈할 가능성도 높아졌고, 실제로 로딩 중인 화면이 길게 노출되는 문제가 있었다. 성능 분석 결