분류 전체보기 (317) # Tech/React [Typescript React] 상태 관리 라이브러리 깊숙한 곳에 숨겨진 함정 클래스 컴포넌트에 있는 setState 메소드는 주의해야 할 특징을 가지고 있습니다.쉽게 설명하자면 병렬로 처리하지만, 여러개가 묶일 때 까지 미룬다. 입니다.비동기로 작동한다. (=상태가 즉시 변경되지 않는다.)최적화를 위해 여러 setState를 묶어서 처리할 수 있다. 아래의 카운터 컴포넌트를 살펴볼까요? interface Props { delta: number; } interface State { count: number; } class Counter extends React.Component { private intervalID: any; constructor(props: Props) { super(props); this.state = { count: props.delt.. 2019. 12. 6. 15:16 # Tech/React [Typescript React] 조건부 렌더링 조건부 렌더링 이미 이전 포스트에서 조건부 렌더링에 대한 대부분의 이야기를 마쳤습니다.이 포스트는 조건부 렌더링에 대해 이야기한 부분만 모아놓은 글입니다. 1.대문자로 시작하는 변수에 컴포넌트를 담는 테크닉을 응용하면 동적으로 컴포넌트를 결정할 수 있습니다.import React from "react"; class LogoutPannel extends React.Component {} class LoginPannel extends React.Component {} let isLogin: boolean = false; let Pannel = isLogin ? LogoutPannel : LoginPannel; let element = ; 2.true, false, undefined, true는 JSX 안에서.. 2019. 12. 6. 14:32 # Tech/React [Typescript React] 이벤트 핸들링 JSX 태그에 이벤트 핸들러 달기 JSX 태그에 이벤트 핸들러를 달고싶다면, 아래의 3가지만 기억하세요.나머지는 HTML 태그처럼 사용하시면 됩니다!문자열 대신 함수를 전달합니다.이벤트 핸들러 함수의 이름은 lowerCalmelCase으로 짓습니다.이벤트 핸들러 함수의 첫 번째 인자는 this로 바운딩해야 합니다. html + js : function toggleLasers(){ ... } JSX : interface ToggleState { isToggleOn: boolean; } class Laser extends React.Component { constructor(props: ToggleState) { super(props); this.state = { isToggleOn: props.isTogg.. 2019. 12. 6. 14:16 # Tech/React [Typescript React] 컴포넌트 생명주기 클래스형 컴포넌트는 규칙에 맞게 움직입니다. 클래스형 컴포넌트는 정해진 생명주기에 맞게 움직입니다. 생명주기 메소드를 오버라이딩하면,다음과 같은 일을 할 수 있죠.특정 조건에서 렌더링 하지 않기.업데이트 전에 해야할 일 수행하기. (데이터 획득 및 ...)컴포넌트가 제거될 때 해야할 일 수행하기. ... 아래는 16.4 버전에서의 생명주기 모형도입니다.리액트 버전마다 생명주기가 다릅니다. 이전 또는 이후의 생명주기가 보고싶다면,React Lifecycle Method Diagram 홈페이지를 참조해주세요. 컴포넌트가 처음 생성될 때 이 범주에 해당되는 생명주기 메소드는 다음과 같습니다.constructorcomponenetDidMount( ) componenetDidMount 메소드는 화면에 처음 컴포넌.. 2019. 12. 6. 13:45 # Tech/React [Typescript React] 컴포넌트 만들기 컴포넌트가 시작이자 끝입니다. 리액트에서 컴포넌트는 알파이자 오메가입니다. 사용자가 보게될 페이지에서 작은 부분들을 컴포넌트로 추출하고,이러한 컴포넌트를 알맞게 조립해서 페이지가 완성되는 것이죠. 프로그래머가 할 일은 작은 컴포넌트를 클래스나 함수로 구현하고,이 컴포넌트를 조합해서 더 큰 컴포넌트나 페이지를 만드는 것 뿐입니다. 컴포넌트는 오직 두가지. 상태가 있느냐, 없느냐. 컴포넌트는 상태State의 유무에 따라 분류할 수 있습니다.상태가 있는 컴포넌트 State Component상태가 없는 컴포넌트 Stateless Component 어떤 데이터에 의해 보여줘야하는 구조가 바뀐다면 상태가 있는 것이고,항상 똑같은 구조만 보여준다면 상태가 없는 것이죠. 가장 간단한 예시로 카운터를 들 수 있는데,상태.. 2019. 12. 6. 12:39 # Tech/React [Typescript React] JSX 문법 JSX, TSX ? JSX는 DOM 요소를 표현하기 위해 사용하는 React의 태그문법입니다.HTML의 태그문법과 유사하기 때문에 배우는데 큰 어려움은 없습니다. 아래의 태그문법에서 element의 우측값이 문자열도 HTML도 아님에 주목해주세요.이 문법을 사용하려면 tsx확장자로 코드를 작성해야 합니다. const element: JSX.Element = ( Hello, World! ); 이제 내부적인 관점에서 살펴보자면, JSX 문법은 아래처럼 JSX 객체로 변환된 뒤에 element에 저장됩니다.즉, JSX 문법은 필수가 아니라는 뜻이죠. const element: JSX.Element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, w.. 2019. 12. 5. 23:26 # Tech/React [Typescript React] 리액트 프리뷰 왜 리액트를 사용해야 하나요? 리액트는 쉽게 사용자 인터페이스를 작성할 수 있게 도와주는 자바스크립트 라이브러리입니다.상황에 맞게 페이지를 렌더링하고, 효율적으로 화면에 띄우는 역할을 하죠. 아래의 원 페이지 앱을 살펴보시면, 리액트는 사용자가 버튼을 누를 때 마다, 바뀌는 부분을 렌더링한 뒤, 효율적으로 페이지를 갱신하는 동작을 수행합니다. 물론 리액트를 사용하지 않아도 위의 예시를 만들 수 있겠지만, 썩 좋은 방법은 아닙니다.뒤에서 리액트가 해줬던 수많은 부분들을 직접 구현해야 하기 때문이죠. 특히 조금만 페이지를 바꾸더라도 발생하는 DOM 변경비용을 최소화하기 위해서는,웹 어플리케이션 성능 최적화에 대한 깊은 이해가 필요합니다. 리액트는 알아서 최적화하여 페이지를 변경해주기 때문에,프론트엔드의 깊은.. 2019. 12. 5. 20:28 # Tech/React TypeScript로 React 시작하기 개요 TypeScript와 React는 모두 매력적인 기술입니다. 그렇다면 하나만 쓰지말고 둘 다 사용하는 것은 어떨까요? 해당 포스팅에서는 타입스크립트와 리액트를 같이 사용할 수 있는 방법을 알려드립니다. 차근차근 따라해보세요. 필수 패키지 설치 TypeScript 이전 포스트에 상세하게 설명한 것이 있으므로 여기서는 요점만 짚고 넘어가겠습니다. 먼저 타입스크립트를 설치한 뒤. npm install typescript @types/node -d타입스크립트 환경설정 파일(tsconfig.json)을 생성하고, npx tsc --init컴파일러 옵션을 다음과 같이 변경합니다. { "compilerOptions": { "outDir": "./out", "rootDir": "./src", "sourceMap".. 2019. 12. 5. 04:20 이전 1 ··· 6 7 8 9 10 11 12 ··· 40 다음
