Web/Frontend15 [리액트] 수정 가능한 텍스트 박스 만들기 기본적으로는 그냥 텍스트로 보이지만, 클릭하면 수정할 수 있는 텍스트 박스를 만들어 보자! 우선 필요한 기능은 다음과 같이 간단하다. 1. editable 상태에 따라 plain text / input box로 표시되어야 한다. 2. 엔터 버튼을 누르거나, 컴포넌트 외부를 클릭하면 editable이 false가 되어야 한다. import React, { useState } from "react"; interface TextInputProps { init: string; } function TextInput({ init }: TextInputProps) { const [text, setText] = useState(init); const [editable, setEditable] = useState(fal.. 2020. 5. 25. [리액트] immutable-js 사용해보기 리액트에서 state는 항상 불변이어야 한다. state의 기존 객체를 직접 수정할 수 없고, setState 함수를 통해서만 수정해주어야 한다. 그렇지 않으면 컴포넌트가 재 렌더링되지 않는다. setState 호출 -> shouldComponentUpdate가 true -> 가상 DOM과 실제 DOM을 비교해서 다르면 -> 화면을 다시 그린다. immutable한 변수를 사용하면, 변수의 내용을 하나하나 비교할 것 없이 레퍼런스만 비교하면 되기 때문에 부담이 줄게 된다. 이런 immutable한 변수를 만드는 방법에는 immutability-helper나 immutable-js가 있다. Immutable-js | $ npm install immutable $ yarn add immutable npm이나.. 2020. 5. 21. [리액트] TypeScript, Styled-Components 프로젝트 초기 셋팅 $ npx create-react-app my-app --typescript TypeScript와 Styled-Components를 같이 이용할 것이다. npx create-react-app에 --typescript 옵션을 줘 my-app이라는 프로젝트를 만들어준다. $ cd my-app $ npm install --save @types/styled-components 프로젝트 폴더로 이동한 후 Styled-Components를 설치한다. 와! 2020. 5. 14. 이전 1 2 다음
tokki
