다음 경로의 이미지를 src 파일에 있는 다른 파일이, styled-components를 이용해 background-image 속성을 사용한다고 한다면.. 일단 import를 해와야 한다. import Bg from './img/Bg.jpg'; 라고 한 다음. styled-components에서 export const Outbox = styled.div` background: url(${Bg}); ` 다음과 같이 작성하면 된다. 사실 엄청 간단한건데.. 왜 안되는지 해메고 있었다. 아니 css는 자동으로 주소 읽어와 주던뎅..

소개 Redux는 상태(state) 관리 라이브러리이다. Redux는 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 효율적으로 상태를 관리할 수 있다. 특히, 컴포넌트끼리 상태를 공유해야 할 때, 기존의 여러 컴포넌트를 거쳐 전달해야 하는 방식과는 달리 Store를 통해 쉽게 상태 값을 전달할 수 있다. Redux는 React 외에도 jQuery 혹은 Angular를 사용하는 애플리케이션에서도 사용할 수 있지만, 이 글에서는 React 기반으로 서술할 것이다. Redux는 글로벌 상태 관리에 효과적이다. 굳이 '글로벌 상태 관리'라는 말을 하는 이유는 굳이 Redux를 사용할 필요는 없기 때문이다. 간단한 애플리케이션이라면, Redux를 사용하지 않더라도 상태를 관리하는데 큰 어려움 겪지 않을..

Flux란? Flux는 Facebook에서 클라이언트-사이드 웹 어플리케이션을 만들기 위해 사용하는 어플리케이션 아키텍쳐이다. 또는 애플리케이션에서 데이터를 다루기 위한 패턴이라고 할 수 있다. Flux 이전 방식(MVC)의 문제점 Facebook에서 React를 사용할 때, Flux이전에는 다음과 같은 방식으로 데이터를 처리하였다. 어떠한 Action이 입력되면 Controller는 Model이 지니고 있는 데이터를 조회하거나 업데이트 하며, 이 변화는 View에 반영된다. 사용자와의 상호작용(UI)이 뷰를 통해서 일어나기 때문에, 사용자의 입력(input)에 따라 뷰가 가끔씩 모델을 업데이트 할 수도 있다. 이러한 디자인 패턴은 작은 어플리케이션에는 큰 문제없이 작동한다. 하지만, Model과 Vie..

MVC(Model-View-Controller) 패턴 이란? MVC 패턴은 여러 디자인 패턴 중 하나입니다. 디자인 패턴들은 좀 더 나은 유지보수를 위해 만들어진 특정한 방법들인데, 그 중 하나가 MVC 패턴입니다. MVC 패턴은 어플리케이션 또는 프로젝트의 구성을 Model, View, Controller 세 가지의 구성요소로 나눈 패턴입니다. 모델(Model) 모델(Model)은 백그라운드에서 데이터에 관한 로직을 처리하는 역할을 담당합니다. 모델은 컨트롤러에 의해 호출되어 데이터베이스에 데이터를 저장하거나, 데이터베이스에서 데이터를 가져와 뷰가 사용할 수 있는 형태로 컨트롤러에 반환합니다. 다음과 같은 규칙을 지켜주어야 합니다. 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다. 뷰나 컨트..

업데이트(갱신, Update) 이벤트 컴포넌트 내부의 state나 props가 변경이 되면 업데이트 이벤트가 발생하며 리렌더링 된다. 컴포넌트가 업데이트 될 때, 다음과 같은 메서드가 실행된다. new Props / setState() / forceUpdate() getDerivedStateFromProps shouldComponentUpdate render getSnapshotBeforeUpdate componentDidUpdate New Props 상위 컴포넌트로부터 갱신된 props를 받는 경우가 있다. 이 때, 갱신된 props를 받은 컴포넌트들은 다시 렌더링되며, update cycle을 진행하게 된다. setState 컴포넌트들은 공통적으로 setState() api를 제공한다. 현재 자신이 ..

서론 React는 라이프사이클(생명주기, Lifecycle) 이벤트를 기반으로 컴포넌트의 동작을 제어하고 사용자 정의를 할 수 있다. 이러한 라이프사이클을 이용하여 우리는 React를 사용해, UI를 화면에 보이게 하고, UI를 업데이트 또는 교체하며, UI를 화면에서 제거할 수 있다. React 라이프사이클 이벤트 라이프사이클 이벤트를 분류해보면 다음과 같다. 마운트(생성, Mounte) 이벤트: React 엘리먼트를 DOM 노드에 추가할 때 발생한다. 업데이트(갱신, Update) 이벤트: 속성이나 상태가 변경되어 React 엘리먼트를 갱신할 때 발생한다. 언마운트 (제거, Unmount) 이벤트: React 엘리먼트를 DOM에서 제거할 때 생긴다. 마운트(생성, Mounte) 이벤트 컴포넌트 함수가..

1. 어떤 상황에서 함수형 컴포넌트와 클래스형 컴포넌트 둘 중 무엇을 사용하는 것이 좋을까? 2. 왜 render가 두 번 실행되는 것인가? 3. [{...}, {...}, ...] 이런 구조로 작성된 state는 props로 data라는 이름을 써야하던데, 이런 구조가 여러 개일 경우에는 어떻게 해야 하는가? 4. 컴포넌트는 얼마나 무엇을 기준으로 얼마나 쪼개야 하는가? 5. css는 각 컴포넌트 마다 파일을 따로해주어야 하는가? 1. 함수형 컴포넌트 스타일에 관해. 2. React Life Cycle 이란? 3. hook란 무엇이며 왜 생겨났는가? X. redux란 무엇이며 왜 생겨났는가?

JSX 소개 JSX는 Javascript를 확장한 문법입니다 UI가 어떻게 생겨야 하는지 설명하는 역할을 합니다 JSX 규칙 1. 태그가 비어있다면 />을 이용해 태그를 바로 닫아주어야 합니다. 2. 두 개 이상의 태그는 무조건 하나의 태그로 감싸져 있어야 합니다. 3. 태그를 작성 할 때 이름 없이 작성하면 Fragment가 만들어 집니다. Hello, React!! 안녕하세요 Hello, React!! 안녕하세요 4. Javascript 표현식을 사용할 때는 중괄호{ }를 이용합니다. const name = 'Josh Perez'; const element = Hello, {name}; 5. class는 className으로 표기해야 합니다. 6. 주석은 {/* */} 형태로 작성해야 합니다.