profile
미래의 나를 위해 쓰는 velog💡

React useReducer()

React에서 제공하는 Hook 함수 중 하나전역 상태 관리보다는 상태 관리에 더 가까움하지만 전역 상태 관리인 Context API나 Redux와 함께 많이 쓰임useState()의 대체 함수dispatch()는 객체를 받음useState()는 state를 변경하는

2022년 8월 4일
·
0개의 댓글
·

React 전역 상태 관리 - #Context

React에서 App > A > B > C > D 순서로 컴포넌트 자식이 형성되어있다 생각했을 때, <span style="background-color:\*props가 계속 전달되는 구조를 props dealing이라 한다.<span style="backg

2022년 8월 4일
·
0개의 댓글
·

방황,,,~

뭐가 문제였는지 모르겠지만공부하기 싫고 매일 매일 누워있고 싶어서 좀 오래 방황을 했다2주? 내 기준 오래인가? 아냐 내 기준 오래도 아니다그냥 일찍 취업하고 싶은 마음에 비하면 오래인정도리액트 때문인가 싶어서 타입스크립트를 배워봤는데 오히려 더 심해졌다ㅋㅋㅋ그래서 자

2022년 8월 4일
·
0개의 댓글
·

TypeScript 타입

<span style="background-color:- TypeScript는 type이 있는 언어변수나 함수, 객체 속성의 데이터 타입 지정변수명, 함수명, 객체 속성명 뒤에 : type을 써서 데이터 타입 지정Type annotation을 사용하여 type 검

2022년 7월 20일
·
0개의 댓글
·
post-thumbnail

TypeScript

과거에 TypeScript는 Javascript를 품고있다(A Superset of Javascript)고 표현하였다.현대의 TypeScript는 <span style="background-color:JavaScript and More (자바스크립트와 그 이상)J

2022년 7월 18일
·
0개의 댓글
·

React Custom Hook

Custom Hook은 API 호출과 직접 연관이 있는 건 아니지만, API 호출을 효과적으로 하는 방법들을 이해하기 위해서는 선행으로 Custom Hook이 어떤건지 이해하고 있어야 한다. 여러 개의 컴포넌트에서 공통적으로 해야하는 작업이 있을 경우 사용한다. ex

2022년 7월 16일
·
0개의 댓글
·

React API 호출 - Fetch & Axios

Fetch API를 이용한 API 호출 Step.01 mount 된 직후에 한 번만 API 호출( useEffect() ) useEffect() import 후 useEffect() 코드 작성 비동기 통신을 위한 async 함수 작성 fetch API를 사용하여 R

2022년 7월 15일
·
0개의 댓글
·

Ajax (비동기)

### HTTP 통신 HTTP(HyperText Transfer Protocol)란 HTML(Hypertext Markup Language)를 주고 받는 네트워크에 대한 통신 규약 혹은 원칙이다. 문서를 주고 받는게 HTTP 통신인데 Ajax는 문서를 주고 받지 않는다

2022년 7월 13일
·
0개의 댓글
·

Promise 객체

간단하게 비동기 방식을 설명하자면, 코드1의 실행이 완료될 때 까지 기다리지 않고 코드2를 실행시킨다. 그리고 코드1의 실행이 완료(성공 or 실패)되면 특정 코드를 실행시키는 것이다. 이것을 가능하게 해주는 것은 Promise이다. Promise 새로운 Prom

2022년 7월 12일
·
0개의 댓글
·

SPA와 React Router

전통적인 방식의 웹 애플리케이션 단점 서버가 화면을 그리기 위해 필요한 html을 만들어서 내려주는 역할까지 하여 서버의 부담이 커짐 때문에 속도가 느려짐 정보양이 많아져 빠르게 계산하여 내려주기 위한 추가적인 캐싱 작업 페이지 이동 시, 새로운 html을 서버에서 내

2022년 7월 7일
·
2개의 댓글
·

React 컴포넌트 스타일링

JSX inline style inline style을 스타일링의 주요 수단으로 사용하는 것은 권장되지 않는다. JSX에선 style 어트리뷰트는 camelCase 프로퍼티를 가진 JavaScript 객체로 받아들임 DOM 노드의 프로퍼티에 접근하는 것과 일관되게

2022년 7월 7일
·
0개의 댓글
·

CSS Modules

CSS Modules이란 css 파일을 하나의 모듈처럼 만들어줘서 일반 css를 작성할 때 있었던 <span style="background-color:style.css 파일을 js 파일으로부터 import를 할 때 어떤 하나의 객체로 받아들일 수 있도록 expo

2022년 7월 5일
·
0개의 댓글
·

리액트 어려워

처음엔 재밌었단 말이지,,,,,예전에 학원에서 배웠던 기억이 어케 스멀스멀 올라오면서 아 이거 이거인듯 이라며 뭔가 생각이라도 했단 말이지,,,,,,,,,,,,,,,,,,,,,근데 막 forward ref,,,,,,,,, 이런거 나오면서 이제 머리가 아프다무슨 말이지

2022년 6월 29일
·
2개의 댓글
·

React Ref와 비제어 컴포넌트

ref란 React에서 DOM 노드나 React 엘리먼트에 직접 접근할 수 있도록 하는 것이다.Ref 사용 사례비제어 컴포넌트포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때애니메이션을 직접적으로 실행시킬 때서드 파티 DOM 라이브러리를 React와 같이 사용

2022년 6월 29일
·
0개의 댓글
·

React Form과 제어 컴포넌트

Form HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 DOM 엘리먼트와 다르게 동작한다. JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근하도록 하려면 '제어 컴포넌트 (controlled

2022년 6월 28일
·
0개의 댓글
·

React 이벤트 처리

React 엘리먼트에서 이벤트를 처리하는 방식은DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사하다. 몇 가지 문법 차이는 다음과 같다.React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다.JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸

2022년 6월 27일
·
0개의 댓글
·

React 리스트와 Key

Components 반복을 할 때 map 함수를 사용한 경우key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도와주며 이를 이용해 컴포넌트 리렌더링 여부를 결정한다.불필요한 리렌더링을 방지하기 위해서는 각 자식 컴포넌트마다 독립적인 key값을

2022년 6월 24일
·
0개의 댓글
·
post-thumbnail

React Lifecycle와 useEffect()

Image Link : https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/모든 컴포넌트는 여러 종류의 '생명주기 메서드'를 가지며, 이 메서드를 오버라이딩하여 특정 시점에 코드가 실행되도록 설정할 수

2022년 6월 22일
·
0개의 댓글
·

React useState() - #Part_2

여러 번 연속해서 setState()를 호출 한다면 단일 업데이트로 한꺼번에 처리한다.아래 코드에서 multiplyAdd() 를 실행시켜 버튼을 클릭한다 가정했을 때 multiply() 이후 add() 가 실행되어 output : 1 → 3 → 7 → 15로 값이 반

2022년 6월 22일
·
0개의 댓글
·

React Props와 State

Props란?(https://velog.io/@art11010/React-Components%EC%99%80-Props- 부모 컴포넌트가 자식 컴포넌트에게 전달 하는 값값을 자신(자식 컴포넌트)이 변경할 수 없음 = 읽기 전용State란?(https:

2022년 6월 21일
·
0개의 댓글
·