본문 바로가기
반응형

리액트3

리액트 커스텀 훅(custom Hook) 모음 4가지 리액트의 훅을 커스텀해서 몇 가지 만들어보게 됐다. useInput import { ChangeEvent, ChangeEventHandler, useCallback, useState } from "react"; type InputValidator = (value: string) => string; const useInput = (validator: InputValidator?, defaultValue?: string): [string, ChangeEventHandler, string] => { const [value, setValue] = useState(defaultValue || ""); const [error, setError] = useState(""); const onChange = useCal.. 2022. 12. 5.
리액트 JSX문법과 컴포넌트, props와 state JSX문법 JSX문법을 사용한 코드와 아닌 코드를 비교해보자. 리액트에서는 JSX를 함께 사용할 것을 권장한다. 대부분의 사람들이 자바스크립트 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각하기에 JSX를 권장한다. JSX 문법 사용 O return ( setFollowing(!following)} style={following ? followingBtnStyle : followBtnStyle} > {following ? "following" : "Follow"} ); JSX 문법 사용 X return React.createElement( "div", { onClick: () => setFollwing(!follwing), style: following ? followingBtnS.. 2022. 8. 17.
리액트에 대한 이해, 자바스크립트와 비교 리액트의 모듈화 기존의 html, css, javascript. 구현해야 하는 기능이 많아지면 script.js 파일 안에 모든 코드를 넣기가 힘들어진다. 이때 여러 개의 css, js 파일로 분리하게 된다. 결국 어떤 방식으로든 분리를 해야한다. 분리할 때, 엘리먼트, 엘리먼트들을 꾸미기 위한 style, script를 묶는 컴포넌트를 만들면 가독성이 좋아질 것이다. 이것이 리액트의 모듈화 아이디어이다. 프론트엔드에서 하는 제어의 대부분은 '상태값이 변하면, UI가 변한다.'는 것이다. 위 이미지를 html, css, javascript로 만든 코드는 아래와 같다. script 태그를 보면 document에 접근하여 새로운 태그를 만들기도 하고 이벤트를 연결하기도 한다. 자바스크립트로 구현했을 때는 상.. 2022. 8. 11.
반응형

티스토리툴바