웹 (10) 썸네일형 리스트형 TypeScript) 타입스크립트 기초 이 글을 아래 링크를 참고하여 공부하며 정리한 자료입니다. https://www.samsungsds.com/kr/insights/TypeScript.html 활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript) 활용도가 높아지는 웹 프론트엔드 언어, 타입스크립트(TypeScript) www.samsungsds.com 타입스크립트란? 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 타입스크립트의 특징 타입스크립트 : 정적 타입 컴파일 언어 -> 컴파일러 또는 바벨로 자바스크립트 코드로 변환되어 코드 작성 단계에서 오류 확인 가능하여 버그를 사전에 제거할 수 있고, 실행 속도가 매우 빠르다 (자바스크립트 : 동적 타입 인터프리터 언어 -> 런타임에 오류 발견 가능) 자바스.. React) onKeyPress와 input 여러개 일 때onChange 이벤트 핸들링 onKeyPress and onChange with multiple input Event Handling source code import React, { useState } from 'react'; const EventHandling = () => { const [form, setForm] = useState({ username:'', message:'' }) const { username, message } = form; const handleChange = e => { const newForm = { ...form, // 기존의 form을 이 자리에 복사 [e.target.name] : e.target.value }; setForm(newForm); } const handleClick = () =>.. React) this.setState 끝난 후 특정 작업 실행 this.setState 끝난 후 특정 작업 실행 setState는 클래스형 컴포넌트에서 state의 상태를 변경하기 위해 사용하는 함수입니다. setState 함수를 실행시켜 state 값을 변경하는 작업을 마친 후에 특정 작업을 실행하도록 하고싶은 경우에는 setState의 두번째 파라미터로 콜백 함수를 등록하면 됩니다. ... { this.setState( {number: number + 1}, () => { ... callback 함수 ...} ); } } > + 1 ... 이렇게 setState의 첫번째 파라미터로 변경할 state 상태를 전달하고, 두번째 파라미터에 setState가 끝난 이후 callback함수를 작성하여 전달하면 됩니다. References 리액트를 다루는 기술(김민준) JSX) props 검증 : propTypes props 검증 : propTypes propTypes는 그동안 사용해본적은 없고 이번에 기술서를 읽으면서 처음 알게된 기능입니다. 여러 명의 개발자들이 협업하는 프로젝트의 경우, 또는 컴포넌트를 재사용할 수 있게 오픈해 놓은 경우 다른 개발자들이 사용할 때 컴포넌트를 본래 의도대로 잘 사용할 수 있도록 하기 위해 props에 전달해야할 값의 자료형을 지정해 놓는 것입니다. 다음과 같이 임포트 해줘야 사용할 수 있습니다. import PropTypes from 'prop-types'; 사용 방법은 defaultProps를 지정하는 방법과 같습니다. ... const Conpomenent = ({ name, extra }) => { return hello {name} {extra} ; } ... Compo.. ES6) 비구조화 할당 destructuring assignment 비구조화 할당 destructuring assignment 기본적으로 전달받은 props 컴포넌트에서 사용하는 방법은 다음과 같습니다. 인자로 props를 받고, props.{props값 명} 으로 사용합니다. 사용할때마다 굳이 props. 을 붙여주는 것은 불편하기 때문에 비구조화 할당 문법을 사용하는 것입니다. // 부모 컴포넌트 -> ... const Component = props => { return hello {props.name} ; } ... 비구조화 할당 방법 1 // 부모 컴포넌트 -> ... const Component = props => { const { name, extra } = props; return hello {name} {extra} ; } ... // hello worl.. JSX) props.children props.children 컴포넌트 태그는 대부분 props를 사용한다면, 다음과 같은 형식으로 호출합니다. 또는 다음과 같이 호출할 수도 있습니다. world 이렇게 컴포넌트 태그 사이에 전달된 world 라는 값은 Componenent 컴포넌트에서 사용하려면 props.children값을 사용하면 됩니다. ... const Component = props => { return hello {props.children} ; } ... 항상 그냥 props 값을 전달하기만 해서 이번에 책을 읽으며 처음 알게 된건데 사실 이걸 언제 사용해야 될지는 잘 모르겠습니다.;; References 리액트를 다루는 기술 (김민준) JSX) props 기본값 설정 : defaultProps 구글링을 하며 공부를 하다보니 지식이 너무 뒤죽박죽인 것 같아 정리하려고 책을 사서 읽고 있습니다 :) 책을 읽으며 그동안 정확하게 정리되지 않았던 내용들을 기록해두기 위한 목적으로 글을 작성합니다! 아래는 제가 읽고 있는 기술서 입니다. 리액트를 다루는 기술 - 교보문고 개정판이 나왔습니다. 리액트 16.8 버전에 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었습니다. 이에 맞춰 책에 사용된 주요 예시를 모두 함수형 컴포넌트 형 www.kyobobook.co.kr props 기본값 설정 : defaultProps 부모 컴포넌트에서 자식 컴포넌트를 불러올 때 전달하는 props의 초기값을 설정하는 방법입니다. import React from 'react'; const .. React에서 미디어쿼리 @media 사용하기 반응형 웹을 만들기 위해 반드시 필요한 @media를 React에서 사용하기 위한 방법입니다. material-UI로 쉽게 사용할 수 있기 때문에 우선 material-ui를 install 하셔야 합니다. 그리고 미디어 쿼리를 적용할 컴포넌트에서 import 해줍니다. import useMediaQuery from '@material-ui/core/useMediaQuery'; 그리고 min-width 보다 스크린이 줄어든 여부를 나타내는 변수를 선언합니다. 아래 min-width: *px 부분에 미디어 쿼리로 적용할 기준 width 사이즈를 입력해줍니다. const matches = useMediaQuery('(min-width:1000px)'); 그리고 matches 변수를 이용하여 미디어 쿼리를 다음.. 이전 1 2 다음
