개발130 react fragment 이번 포스팅에서는 react의 Fragment에 대해 간단히 이야기하고자 합니다. React Fragment ko.react.org에서는 react fragment를 다음과 같이 설명하고 있습니다. React에서 컴포넌트가 여러 엘리먼트를 반환하는 것은 흔한 패턴입니다. Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있습니다. React Fragment는 컴포넌트가 여러 엘리먼트를 반환해야 할 때 등의 다른 태그로 감싸지 않고 엘리먼트를 반환합니다. 렌더링 시에도 반환된 그 여러 태그들은 따위로 감싸져 있지 않습니다. Fragment를 적절히 사용하면 불필요한 태그를 제거할 수 있습니다. 또 table의 column 등을 추출하여 컴포넌트로 만들수 있습니다. 다음 코드.. 2021. 3. 29. React 코드 재사용(composition과 고차 컴포넌트, custom hook) React의 코드 재사용(또는 캡슐화) 방법에 대해 알아봅시다. 코드 재사용이 필요한 이유 너무나도 고전적인 주제지만 그래도 모든 기술은 어떤 문제의 solution으로 나온 것이니, 짚고 넘어가도록 하겠습니다. 코드 재사용은 크게 다음 두 가지의 장점이 있습니다. 구현할 때, 시간과 리소스를 절약 중복성을 줄임 같은 코드를 두 번 치지 않음으로 시간과 리소스를 절약하는 것은 당연합니다. 그렇다면 중복성을 줄이는 것에서 오는 이점은 무엇일까요? 만약, 재사용하는 코드를 update를 하면, 해당 코드를 재사용하는 모든 곳에서의 해당 update가 적용됩니다. 이런 일관성은 프로그램의 유지/보수를 쉽게 합니다. React에서 코드 재사용을 위한 기술은 다음과 같이 여러 가지가 있습니다. Component .. 2021. 3. 28. React Virtual DOM React의 최적화 기법 중 하나인 virtual DOM에 대해 알아보겠습니다. 혹시 DOM에 대해 아직 정확히 모르시다면 다음 포스팅을 보고 오시면 내용 이해에 도움이 됩니다. DOM 은 무엇인가? DOM은 Document Object Model(문서 객체 모델)이다. HTML이나 XML로 이루어진 문서를 프로그래밍적으로 js 코드 상에서 수정 가능하도록 interface를 제공한다. 즉, 각 element에 대한 method를 제공하여 수.. amkorousagi-money.tistory.com Virtual DOM이란? Virtual DOM (VDOM)은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입.. 2021. 3. 28. 세션과 쿠키, 상태, 로컬 스토리지 웹 사이트를 만들다 보면 DB 외에 정보를 관리할 필요성을 느끼게 됩니다. 예를 들면, 사용자가 로그인 후에 인증 토큰을 받을 때처럼 말이죠. 현재 보편적으로 사용되는, DB가 아닌 정보를 관리하는 웹 기술들을 알아보고자 합니다. Session에 대한 배경 session의 사전적 정의는 특정 활동 기간입니다. (구글 번역 기준) 이러한 정의는 computer science에서의 의미와는 조금 다릅니다. session을 특정 기술의 명칭이라고 생각하는 사람들이 더러 있습니다. 그러나 computer science에서 session은 사실 특정 데이터 저장 기술을 의미하지 않습니다. 하지만 여러 언어(JSP,ASP,PHP..)에서 사용자와의 session을 유지하기 위해서 만든 session token을 부.. 2021. 3. 27. props vs. state 2 (그리고 this) 전 포스팅에 조금 설명이 부족한 부분이 있어서 한번 더 말해보겠습니다.. State는 private 하다. state는 private 합니다. state를 변경할 수 있는 건 오직 자기 자신의 Component 뿐입니다. 그렇다면 일반적으로 쓰이는 setState를 props로 자식에게 넘겨주어 부모 state를 변경하는 건 어떻게 받아들여야 될까요? props state 부모 Component에 의해 변경되는가? O X 그 Component 안에서 변경되는가? X O 자식 Component 안에서 변경되는가? O X 다음 표와 같이 state는 자식 Component안에서 변경이 되지 않는다고 하였는데, setState로 부모 Component의 state를 변경하는 경우는 어떻게 설명할까요? 그것은 .. 2021. 3. 27. Props vs. State React에는 두 가지 데이터 “모델”인 props와 state가 있습니다. 이 둘 사이의 차이점을 이해하는 것이 중요합니다. -React 공식 문서 (React로 사고하기)- Component란 Props와 State에 대한 차이점을 이야기하기 전에 component가 무엇인지 살펴보자. component에 대한 programminng적 지식 말고, state와 props를 이해하기 위한 관점으로 말이다. component의 주된 역할은 raw data를 풍부한 표현의 HTML로 변환하는 것이다. 수학적인 관점에서는, component를 raw data를 input으로 받고 적절한 HTML을 ouput으로 출력하는 하나의 함수라고도 볼 수 있다. 좀 더 전문적인 용어로 정의하자면, props와 stat.. 2021. 3. 25. 이전 1 ··· 16 17 18 19 20 21 22 다음
