| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- 백준 11047 자바스크립트
- 백준 4796 타입스크립트
- JavaScript
- 알고리즘
- 백준 11047 nodejs
- 백준 1018 javascript
- 백준 4796 자바스크립트
- 백준 1449 타입스크립트
- 백준 4796 nodejs
- CSS
- 백준 4796 javascript
- 백준 2503 typescript
- 백준 1018 자바스크립트
- 백준 1018 nodejs
- 백준 1449 javascript
- 백준 1449
- 백준 1449 노드
- 백준 11047 javascript
- 백준 2503 자바스크립트
- 백준 1449 nodejs
- 백준 10448 javascript
- 백준 1018 타입스크립트
- 백준 4796 캠핑
- 백준 11047 타입스크립트
- 백준 2503 nodejs
- 백준 2503 타입스크립트
- 백준 1018 typescript
- 백준 11047 typescript
- 백준 2503 javascript
- 백준 1449 자바스크립트
- Today
- Total
목록FRONTEND/React (7)
POTATO THAT WANT TO BE HUMAN
[React] 반복문에서 setState?
나 : 배열 길이만큼 for문 돌리면서 배열의 값을 state 변수에 저장할게 !! 현실 : 되겠냐 ㅋㅋ 🔎 원인을 알아보자 state 값을 변경시켜주는 setState()는 비동기이기 때문 ! 즉각적으로 상태를 업데이트 시켜준다면 반복문 내에서도 사용이 가능하다. 하지만 setState() 는 Promise 를 이용해 비동기적으로 상태를 변화시키기 때문에 생각처럼 작동하지 않는다. 더 자세히 알아보면, setState()를 호출하게 되면 UpdateQueue에 업데이트 요청이 큐잉되고 비동기적으로 하나씩 처리한다. 이 업데이트 요청이 완료되기 전에 새로운 업데이트 요청이 들어오게 되면 업데이트 전의 값을 기준으로 다시 큐잉되게 한다. 그렇다. for문 안에서 setState() 로 업데이트 요청을 했는..
[React] LiftCycle과 useEffect
🔎 리액트의 라이프사이클 리액트는 컴포넌트 기반의 view를 중심으로 한다. 그렇기 때문에 각각의 컴포넌트에는 라이프사이클(수명주기)가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 다음은 리액트의 라이프사이클에 대해 잘 나타낸 다이어그램 사이트이다. 본 글에 사용된 다이어그램 역시 위 사이트를 캡쳐한 것이다. React Lifecycle Methods diagram Fully interactive and accessible React Lifecycle Methods diagram. projects.wojtekmaj.pl 리액트의 라이프사이클은 크게 세가지로 나눌 수 있다. 생성 될 때 ➡ 마운트 업데이트 할 때 ➡ 업데이트 제거 할 때 ..
리액트에서 렌더링 성능 최적화를 위해 사용되는 hook 중에는 useCallback과 useMemo가 있다. 이에 대해 자세히 알아보기 전에 우선 리액트의 렌더링과 메모이제이션에 대해 알아보자. 🔍 리액트의 렌더링 리액트에서 컴포넌트를 리렌더링하게 되는 조건에는 3가지가 있다. 자신의 state가 변경될 때 부모 컴포넌트로부터 전달받은 props가 변경될 때 부모 컴포넌트가 리렌더링 될 때 컴포넌트가 렌더링된다는 것은 누군가가 그 컴포넌트를 호출해 실행되는 것을 의미한다. 컴포넌트가 실행될 때마다 내부에 선언되어 있던 변수나 함수 등의 표현식도 매번 다시 선언되어 사용된다. 많이 사용되는 함수형 컴포넌트는 렌더링 → Component 함수 호출 → 모든 내부 변수 초기화의 순서를 거친다. 컴포넌트가 렌더..
쿼리스트링이 궁금하다면 더보기 📌 쿼리스트링(Query String)이란? 쿼리스트링이란 사용자가 입력 데이터를 전달하는 방법 중 하나로, url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말합니다. 쿼리스트링은 url 뒤에 덧붙여서 추가적인 정보를 서버 측에 전달하는 것으로, 클라이언트가 어떤 특정 리소스에 접근하고싶어하는지 정보를 담습니다. 정해진 엔드포인트 주소 이후에 ? 를 쓰는 것으로 쿼리스트링이 시작하는 것을 알립니다. parameter = value 로 필요한 파라미터의 값을 작성합니다. = 으로 key와 value를 구분합니다. 파라미터가 여러 개일 경우 & 를 붙여 여러 개의 파라미터를 넘길 수 있습니다. url 경로에 영향을 끼치지 않습니다. 게시판 등 값을 받아올 때 주..
내가 원하는 것 : 자식 component에서 어떤 이벤트가 발생하면 부모가 알아채고 state를 변경한다. 리액트에서 event를 JSX로 연결할 수 있다는 것은, 아주 손쉽게 어떤 component에서 event에 따른 동작을 해당 component 이외에, 자신을 사용하는 component (부모 component)에서 컨트롤할 수 있도록 제공 가능하다는 이야기 이다. 즉 props나 state를 이용해서 event handler 을 연결할 수 있다는 이야기이다. class형 예제 class Parent extends React.Component { parentHandler() { // Parent's defined handler } render() { const parentPassedHandler..
리액트에서 key는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열 어트리뷰트입니다. 🔑 key key는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 key로 사용합니다. 렌더링 한 항목에 대한 안정적인 ID가 없다면 최후의 수단으로 항목의 인덱스를 key로 사용할 수 있습니다. 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관..
[React] React 시작하기
자바스크립트의 라이브러리에는 React, Angular, Vue 가 있습니다. 그 중 리액트에 대해 알아보겠습니다. 🧐 리액트의 특징 1. JSX 문법 JSX는 자바스크립트 안에서 html 문법을 사용해 view를 구성할 수 있도록 도와주는 자바스크립트 문법입니다. class Hi extends React.Component { render() { return( Hi. My name is NeeHing ) } } 2. Component 기반 리액트는 컴포넌트 기반 라이브러리입니다. 컴포넌트는 기존의 웹 페이지를 작성할 때 처럼 하나의 html 코드를 집어넣고 하는 것이 아닌, 여러 부분을 분할해서 코드의 재사용성과 유지보수성을 증가시켜줍니다. 우리가 프론트를 짤 때 아주 긴 html 코드를 적을 때가 있을..