# Tech/React (13) # 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 2 다음
