React

웹 앱(Web app)을 만들기 위해서 사용한다.다른 페이지로 넘어가거나 포스팅을 발행하거나 그런 행동을 해도 새로고침이 되지 않고 스무스하게 동작한다.모바일 앱이랑 느낌이 비슷해서 앱이라고 부른다.요즘은 굳이 필요없어도 웹앱을 자주 사용하는데, 그 이유는 아래와 같다

매주 주말에는 블로깅을 하려고 했지만 지난주에는 개인적인 사정(물론 변명이겠지...ㅠㅠ)으로 내용정리가 밀려버렸다.그래서 2주간의 Foundation 을 정리해 보려고 한다.Wecode에서 제공한 문서와 세션을 통해 공부하였지만, 이번에 내용 정리를 하면서 React

이번에는 지난 포스팅에서 정리 하지 못한 component, state, props 등의 내용을 함께 설명하려고 한다.Component를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.개념적으로는 컴포넌트는 Javas

위의 코드는 을 출력하는 컴포넌트의 return 값이다. type을 props로 전달받아 type별로 다른 input 을 render하도록 구현 하고 싶었다. > ` 또는 ` 그런데 한줄 때문에 코드가 중복이 되버렸다.... 매우 불편........ㅡ,ㅡ 그래서 wecode stackoverflow를 이용해서 질문을 올렸다. 선배 개발자님의...

아래는 React.memo(https://ko.reactjs.org/docs/react-api.htmlReact.memo는 고차 컴포넌트(Higher Order Component)입니다.당신의 컴포넌트가 동일한 props로 동일한 결과를 렌더링해낸다면, Rea

Ref와 DOMRef는 render메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다.React로 개발을 하다보면 아래와 같은 ref를 자주 사용할 것이다.그런데 내가 만든 컴포넌트(함수형 컴포넌트)의 ref를 이용하고 싶을 때가 있을 것이

평소에 테이블을 만들때 <table> 태그 또는 flex를 이용해서 만들었는데 이번엔 grid 기능을 이용해서 테이블을 만들어 보았다.사용해보니 grid-template-columns을 이용해 column의 width를 맞추기가 굉장히 편리했다.요구 기능 명세는

row에서 한가지 옵션을 선택했다면 나머지 row에서는 선택한 옵션을 제외한 리스트가 보이도록 한다.(selected options가 중복된 값을 가질 수 없도록 하기위함)코드에 대한 설명은 주석으로 대체 하겠다.간단한 custom select box를 만들어 보았다.

이 글의 목적은 리렌더링 최적화이다.예제 코드는 간단하게 여러장의 카드 중에서 한장을 선택하면 배경색이 바뀌는 로직이다.카드 한장을 선택 할때 마다 모든 카드가 리렌더링 되고 있다.예제에선 카드가 6장 밖에 없어 성능상 큰 문제가 없는데개발자로 일하면서 마주치게 될 실