WINK-(Web & App)/React.js 스터디 (126) 썸네일형 리스트형 [2025 겨울방학 React.js 스터디] 박현빈 # 2주차 useRefReact를 사용하는 프로젝트에서도 DOM에 직접 접근해야 하는 아래와 같은 경우가 있을 수있다. 아래와 같은 경우에 React에서는 ref를 사용한다. - 특정 엘리먼트의 크기와 스크롤바 위치를 설정시- 포커스 설정시- 외부라이브러리를 특정 DOM에 적용해야 할 때useRef()를 사용하여 Ref 객체를 만들고, 이 객체를 우리가 선택하고 싶은 DOM에 ref 값으로 설정해주어야 한다. 그러면, Ref 객체의 .current값은 우리가 원하는 DOM을 가르키게 된다. import React, { useState, useRef } from 'react';function InputSample() { const [inputs, setInputs] = useState({ name: '', .. [2025 겨울방학 React.js 스터디] 박현빈 # 1주차 리액트가 만들어진 이유리액트 등장 이전 DOM의 문제점이벤트와 상태 변화가 많아질수록 DOM 업데이트 규칙이 복잡해지고 관리가 어려워지며 유지보수가 힘들어짐리액트의 독창적 접근과 Virutal DOM상태 변화시에 DOM 업데이트 규칙을 정하는 것이 아니라, 아예 다 날려버리고 처음부터 모든걸 새로 만들어서 보여준다면 어떨까? 라는 아이디어에 시작했다. 하지만, 전체를 새로 렌더링하면 성능이 문제갈 될 수 있다.Virutal DOM을 도입하여 해당 문제를 해결.실제 DOM 대신 메모리에 존재하는 가상 DOM을 사용하며 상태 변환 시, Virtual DOM에 새 UI를 렌더링하고 실제 DOM과 비교하여 변경된 부분만 업데이트 (선택적 수정이 가능)이를 통해 성능 문제를 해결하면서도 간단한 개발 환경을 제공... [2024-2 React.js 스터디] 이서영 #5주차 API 연동하기 웹 애플리케이션을 만들 때 데이터를 브라우저에서만 X데이터를 보존, 다른 사람들도 조회 가능 하게 하려면서버를 만들고 서버의 API를 사용 → 데이터를 읽고 써야함 1. API 연동의 기본 API 호출 → axois 라이브러리 설치$ npx create-react-app api-integrate$ cd api-integrate$ yarn add axios axios 사용해서GET : 데이터 조회POST : 데이터 등록PUT : 데이터 수정DELETE : 데이터 제거REST API를 사용할 때, 하고 싶은 작업에 따라 다른 위의 메서드들로 요청 axios 사용법import axios from 'axios';axios.get('/users/1');get이 위치한 자리에는 메서드 이름을 소.. [2024-2 React.js 스터디] 윤아영 #5주차 1. API 연동의 기본API 를 호출하기 위해서 axios 라는 라이브러리를 설치해야 한다.axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있다.npm install axios# 또는 yarn add axiosGET: 데이터 조회POST: 데이터 등록PUT: 데이터 수정DELETE: 데이터 제거import axios from 'axios';axios.get('/users/1'); 위와 같이 사용할 수 있다.axios.post('/users', { username: 'blabla', name: 'blabla'}); axios.post() 로 데이터를 등록할 수 있다. (1) useState 와 useEffect 로 데이터 로딩하기 요청에 대한 상태를 .. [2024-2 React.js 스터디] 김지수 #6주차 리덕스리덕스에서 사용되는 키워드 숙지하기리덕스를 사용하게 될 때 앞으로 접하게 될 키워드들을 미리 알아봅시다. 이 키워드들 중에서 대부분은 이전에 useReducer를 사용해볼때 접해본 개념이기도 합니다.액션 (Action)상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킵니다.{ type: "TOGGLE_VALUE"}{ type: "ADD_TODO", data: { id: 0, text: "리덕스 배우기" }}{ type: "CHANGE_INPUT", text: "안녕하세요"}액션 생성함수 (Action Creator)액션 생성함수는, 액션을 만드는 함수입니다. export function addTodo(data) { return { type: "ADD_T.. [2024-2 React.js 스터디 ] 김지수 #5주차 API 연동의 기본axios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청할 수 있습니다. 간단하게 설명을 드리자면, REST API 를 사용 할 때에는 하고 싶은 작업에 따라 다른 메서드로 요청을 할 수 있는데 메서드들은 다음 의미를 가지고 있습니다.GET: 데이터 조회POST: 데이터 등록PUT: 데이터 수정DELETE: 데이터 제거axios 의 사용법은 다음과 같습니다.import axios from 'axios';axios.get('/users/1');get 이 위치한 자리에는 메서드 이름을 소문자로 넣습니다. 예를 들어서 새로운 데이터를 등록하고 싶다면 axios.post() 를 사용하면 됩니다.그리고, 파라미터에는 API 의 주소를 넣습니다.axios.post(.. [2024-2 React.js 스터디] 이서영 #4주차 실습투두리스트 만들기 1. 컴포넌트 만들기컴포넌트의 UI를 미리 만들어봅시다아 프로젝트 생성$ npx create-react-app mashup-todolist react-icons , styled-components 설치$ cd mashup-todolist$ yarn add react-icons styled-components 만들어야 할 컴포넌트TodoTemplate → 투두리스트의 레이아웃 설정, 페이지 중앙의 흰색박스 (그림자를 곁들인..)TodoHead → 날짜 요일 해야 할 일 개수TodoList → 할 일 정보TodoItem → 정보 렌더링, 완료 여부, 항목 삭제TodoCreate → 할 일 등록회색 배경색상 적용 (#e9ecef)페이지의 배경 색상 설정→ body태그에 CSS 적용inde.. [2024-2 React.js 스터디 ] 김지수 #4주차 컴포넌트 만들기우선 create-react-app 을 사용하여 새로운 프로젝트를 만들어주세요.$ npx create-react-app mashup-todolist 해당 디렉터리에 들어가서 이번 프로젝트에서 필요한 라이브러리 react-icons 와 styled-components 를 설치하세요.$ cd mashup-todolist$ yarn add react-icons styled-components 만들어야 할 컴포넌트 확인하기TodoTemplate이 컴포넌트는 우리가 만들 투두리스트의 레이아웃을 설정하는 컴포넌트입니다. 페이지의 중앙에 그림자가 적용된 흰색 박스를 보여줍니다.TodoHead이 컴포넌트는 오늘의 날짜와 요일을 보여주고, 앞으로 해야 할 일이 몇개 남았는지 보여줍니다.TodoList이 컴.. 이전 1 2 3 4 5 6 7 8 ··· 16 다음
