분류 전체보기 (66) 썸네일형 리스트형 [TIL] State 끌어올리기 / useRef State 끌어올리기리액트에서는 여러 개의 컴포넌트들이 서로 부모와 자식 관계를 이루며 계층 구조를 형성하는데 특정 컴포넌트가 다른 컴포넌트에게 데이터를 전달하려면 반드시 두 컴포넌트는 서로 부모 자식 관계를 가지고 있어야 한다. 형제 관계에 있는 컴포넌트들은 state를 전달할 방법이 없어 state를 계층 구조상 위로 끌어올려 그 아래에 있는 컴포넌트들이 모두 공유할 수 있도록 만들어야 한다. 이러한 방법을 State 끌어올리기라고 표현한다. props기능을 이용해서 부모에서 자식 방향으로만 데이터를 전달할 수 있다. 그래서 데이터들은 항상 위에서 아래로 하나의 방향으로만 흐르게 된다. 이를 단방향 데이터 흐름이라고 부른다. useRef useRef란?useRef 메서드는 레퍼런스를 사용하기 위한.. [TIL] React Hooks / useState / Custom Hook React HooksReact Hooks란?리액트 훅이란 클래스 컴포넌트에서만 이용할 수 있는 리액트의 특수한 기능을 함수 컴포넌트에서도 이용할 수 있도록 도와주는 메서드들이다. React Hooks 종류리액트 훅은 매개변수가 1개인 것과 2개인 것으로 나눌 수 있다.매개변수 개수훅 함수1개useState, useRef, useImperativeHandle, useContext2개useMemo, useCallback, useReducer, useEffect, useLayoutEffect 매개 변수가 1개인 훅 메서드들은 아래와 같은 코드 패턴을 공통으로 사용한다.훅_메서드(값) 매개 변수가 2개인 훅 메서드들은 아래와 같은 코드 패턴을 공통으로 사용한다.훅_메서드(콜백_함수, 의존성_목록) React H.. [TIL] JSX / Props / 이벤트 속성 JSXJSX는 JavaScript XML의 줄임말로서 XML 구문에 JS 코드를 결합하는 용도로 만들어진 구문이다. JSX를 이용하면 JS와 HTML을 혼용하여 사용할 수 있기 때문에 함수가 HTML을 반환하는 수준을 넘어서 동적으로 특정 변수의 값을 HTML로 렌더링하도록 설정할 수 있다.JSX 주의 사항중괄호 내부에는 JS 표현식만 넣을 수 있다.숫자, 문자열, 배열 값만 렌더링 된다.모든 태그는 닫혀있어야 한다.최상위 태그는 반드시 하나여야만 한다. Props 리액트에서는 부모 컴포넌트가 자식 컴포넌트에 마치 함수의 인수를 전달하듯이 원하는 값을 전달해주는 게 가능하다. 이때 컴포넌트에 전달된 값들을 Props라고 부른다. Props를 이용하면 전달하는 값에 따라서 각각 다른 UI를 렌더링하도록 .. [TIL] React의 특징 프로젝트에서 리액트를 많이 사용해왔지만 복습 겸 놓친 부분이 있는지 확인하기 위해 리액트 강의를 듣고 정리하고자 한다. React는?리액트는 Meta에서 발표한 오픈소스 JavaScript 프레임워크다. 대규모 웹 서비스의 UI를 더 편하게 개발하기 위해 만들어진 기술이다. React의 기술적인 특징컴포넌트를 기반으로 UI를 표현한다.리액트에서는 기본적으로 페이지의 모든 요소들을 컴포넌트 단위로 모듈화해서 개발하기 때문에 여러 페이지에서 공통적으로 사용되는 요소가 필요할 때 하나의 컴포넌트를 만들고 그 컴포넌트를 여러 페이지에서 불러와서 사용하면 된다. 수정사항이 발생하더라도 해당 컴포넌트 하나만 수정하면 되기 때문에 유지보수에 굉장히 용이하다. 화면 업데이트 구현이 쉽다.리액트가 채택한 선언형 프로그래.. [JS] 실행 컨텍스트 실행 컨텍스트란? 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체다. 각 실행 컨텍스트는 해당 코드 블록이 실행되는 동안 필요한 모든 정보를 담고 있다. 이 정보에는 변수, 함수, 객체 등의 정보를 담고 있으며 코드의 실행이 이루어질 때 해당 컨텍스트에 따라 변수의 범위 및 값이 결정된다. 실행 컨텍스트 동작 과정 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고 콜 스택에 쌓아 올린다. 가장 위에 쌓여있는 실행 컨텍스트와 관련 있는 코드들을 실행하여 전체 코드의 환경과 순서를 보장한다. var a = 1;function outer() { function inner() { console.log(a); // undefined var.. [JS] 이벤트 루프 JS는 Single Thread 언어 JS는 싱글 스레드 방식으로 동작한다.싱글 스레드란 기본적으로 한번에 하나의 작업만을 수행할 수 있다는 것이다. 하지만 JS는 비동기 처리가 가능하다. 싱글 스레드 언어인데 어떻게 비동기 코드가 실행될 수 있을까? 브라우저의 구조 브라우저에는 JS 엔진만 있는 것이 아니라 Web API, 콜백 큐, 이벤트 루프 등도 있다.JS 엔진JS 엔진에는 Memory Heap과 Call Stack이 있다.Memory Heap : 데이터를 만들 때(변수 선언 및 할당) 저장되는 공간이다.Call Stack : 함수를 실행할 때마다 쌓이는 공간으로, 함수 실행 순서를 제어한다.Web APIJS 엔진 자체가 제공하지 않는 브라우저에서 제공하는 API다.DOM API, setTime.. [Web] Next.js의 App Router Next.js의 App Router는?Next.js 13부터 새롭게 추가된 기존의 Page Router를 대체하는 완전히 새로운 개념의 router다.routing을 설정하는 방식이 기존의 Page Router 버전과는 완전히 달라지게 된다.페이지의 레이아웃을 설정하는 방법이나 데이터를 불러오는 방식에도 다양한 변화가 생기게 된다.React 18부터 새롭게 추가된 리액트 서버 컴포넌트나 스트리밍 등의 최신 기능들도 함께 사용할 수 있게 된다. Page Routing page라는 이름을 갖는 파일만 page 파일로써 취급된다.만약 test 경로에 대응하는 페이지를 만들려면 페이지를 만들고자 하는 폴더 안에 page 파일을 만들면 된다. 동적 경로 URL 파라미터를 사용하는 동적 경로에 대응하게 되는 페이.. [Web] Next.js의 Page Router Next.js의 Page Router는?React Router 처럼 특정 조건을 기준으로 웹 서비스 내에 페이지를 분할하고 분할된 페이지 간의 이동을 처리하는 등의 페이지 라우팅을 처리해주는 기능을 제공해준다. 기본 파일프로젝트를 생성하면 pages 폴더 안에 _app.tsx, _document.tsx 파일이 자동으로 생성된다. _app.tsx App 컴포넌트는 root 컴포넌트로서 모든 페이지 컴포넌트의 부모 컴포넌트가 된다.전체 페이지에 공통적으로 포함되는 컴포넌트를 렌더링 하거나 비즈니스 로직들을 작성할 수 있는 공간이다. _document.tsx 모든 페이지에 공통적으로 적용되어야 하는 메타 태그 또는 폰트와 같은 HTML 태그를 설정하는 곳이다. Page Routing useRouter 훅.. 이전 1 2 3 4 5 6 ··· 9 다음