react (4) 썸네일형 리스트형 React | Portal을 이용한 Modal 구현 한국인에게 portal이란.. 닥터스트레인지의 마법진같은 포탈만 떠오를 수 있다. 이미 충분히 익숙한 다른 곳으로 이동시킨다는 개념을 이어받아, 컴포넌트를 부모 컴포넌트의 바깥에 렌더링해주는 신기한 portal을 알아보자. Portal이란? React 공식 문서에 따르면, Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법이다. 위 설명이 쉽게 이해가지 않는다면, 아래를 보자. 현재 와 은 형제 관계처럼 보이지만 실제로 modal은 root 안에서 보여지는 자식 컴포넌트이고, 렌더링만 root의 바깥에서 이루어지고 있다. 왜 사용할까? 일반적으로 react는 부모 컴포넌트가 렌더링되면 자식 컴포넌트가 렌더링되는 tree 구조를 가지고 있다. 하지만 때.. React | Styled Components 💅 Styled Components란? 현대 웹 앱은 점차적으로 컴포넌트를 기반으로 고안되고 있고, 이에 따라 CSS 스타일링 또한 컴포넌트를 기반으로 재구성되고 있다. 이러한 흐름 속에서 등장한 패러다임이 CSS-in-JS (JS파일 안에서 CSS를 함께 관리하는 것)이고, 그 중 가장 인기 있는 라이브러리가 바로 Styled Components Styled Components을 사용하는 이유 위와 같이 클래스명을 해시값으로 자동 생성하므로 클래스명 오염을 방지한다. CSS 문법을 온전하게 사용할 수 있다. 자바스크립트의 동적인 값들을 온전하게 사용할 수 있다. 컴포넌트와 스타일이 하나의 파일로 결합되어 모듈화가 수월해진다. 사용 예시 컴포넌트 파일의 상단에 아래와 같이 styled-components.. React | State와 Props State와 Props state 와 props (properties)는 JavaScript의 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는, 속성을 가진 데이터이다. State와 Props의 차이점 state : (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리되는 데이터. 자식 컴포넌트 입장에서 보면 쓰기 전용이라고 할 수 있다. props : (함수의 매개변수처럼) 상위 계층의 컴포넌트에서 자식 컴포넌트로 전달되는 데이터. 자식 컴포넌트 입장에서 보면 읽기 전용이라고 할 수 있다. 어떤 데이터가 state가 되어야 할까? 부모로부터 props를 통해 전달되는가? 시간이 지나도 변하지 않는가? 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가? 위 질문에 하나라도 yes가 나.. React | What is React? Why React? 웹의 규모가 커지면서 동시접속자 수와 데이터의 양이 폭발적으로 증가했고, 이 결과로 웹 3세대의 시대가 도래하게 된다. 이러한 흐름속에서 기존의 DOM, jQuery만으로는 새로운 웹 애플리케이션을 개발하고 코드를 유지보수 하는 것이 어려워졌다. 규모가 커지고 복잡해진 웹 애플리케이션의 데이터 관리 / 코드 유지 보수를 편리하게 하기 위해 다양한 Frontend Framework 및 Library가 등장한다. React는 이 중 Frontend Library에 해당한다. What is React ? - 사용자 인터페이스(UI)를 만들기 위한 JS 라이브러리 - 컴포넌트 단위로 이루어진 UI 라이브러리 위 단어에서 생소하게 느껴졌던 단어, 라이브러리와 컴포넌트 아래로 각각 정리해본다. .. 이전 1 다음
