코딩 공부/JavaScript28 [JS] async와 await async와 await ES2017에 도입된 문법으로서, Promise 로직을 더 쉽고 간결하게 사용할 수 있게 해줍니다. 유의해야 할 점이 async/await가 Promise를 대체하기 위한 기능이 아니라는 것입니다. 내부적으로는 여전히 Promise를 사용해서 비동기를 처리하고, 단지 코드 작성 부분을 프로그래머가 유지보수하게 편하게 보이는 문법만 다르게 해줄 뿐이라는 것입니다. 🏷️ async와 await 기본 사용법 async 와 await 는 절차적 언어에서 작성하는 코드와 같이 사용법도 간단하고 이해하기도 쉽습니다. function 키워드 앞에 async 만 붙여주면 되고, 비동기로 처리되는 부분 앞에 await 만 붙여주면 됩니다. // 기존 Promise.then() 형식 function.. 2023. 12. 9. [React] Formik Formik Formik은 React의 장황한 form을 3가지 측면에서 도와주는 작은 라이브러리입니다. ▪️ form state 안팎에서 값 가져오기 ▪️ 유효성 검사 및 오류 메시지 ▪️ form submit 처리 현재 시점에 비슷한 라이브러리들과의 다운로드 수를 비교해보면 1위를 달리고 있고 formik이 다른 라이브러리들에 비해 성능 측면이나 추론, 리펙토링에서 우위를 점하고 있습니다. 🏷️ 설치 npm install formik 🏷️ 예시 코드 import { Formik, Form, Field, ErrorMessage } from "formik"; export default function TestComponent() { // 코드 생략 function onSubmit(values) { // .. 2023. 12. 3. [React] useEffect useEffect 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook입니다. 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있습니다. 컴포넌트가 마운트 됐을 때, 언마운트 됐을 때 , 그리고 업데이트 될 때 특정 작업을 처리할 수 있습니다. 즉, 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었습니다.(라이프사이클 훅을 대체할 수 있게 되었습니다) ex) componentDidMount, componentDidUpdate, componentWillUnmount mount란? 리액트에서 마운트(Mount)는 DOM 객체가 생성되고 브라우저에 나타나는 것을 의미합니다. 말 그대로 브.. 2023. 12. 2. [React] React Context React Context 리액트 context는 앱에서 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 넘겨주며 사용할 수 있게 해 줍니다. 다시 말해, 리액트 context는 컴포넌트들이 데이터(state)를 더 쉽게 공유할 수 있도록 해줍니다. 🏷️ 사용해야 할 때 리액트 context는 앱의 모든 컴포넌트에서 사용할 수 있는 데이터를 전달할 때 유용합니다. ✅ 데이터 종류 ▪️ 테마 데이터 (다크 모드 혹은 라이트 모드) ▪️ 사용자 데이터 (현재 인증된 사용자) ▪️ 로케일 데이터 (언어 혹은 지역) 데이터는 자주 업데이트할 필요가 없는 리액트 context에 위치해야 합니다. 왜냐하면 context는 전체적인 상태 관리를 위해 만들어진 시스템이 아니기 때문입니다. context는 데이터를.. 2023. 11. 29. [React] Default Export와 Named Export 🏷️ Default Export Default로 선언된 모듈은 하나의 파일에서 단 하나의 변수 또는 클래스 등만 export 할 수 있습니다. // import import LoginComponent from './LoginComponent'; // export function LoginComponent() { // 생략 } export default LoginComponent; 모듈의 이름이 무엇이든 간에 default로 내보낸 모듈은 어떤 이름으로든지 import할 수 있습니다. import LoginComponent from './LoginComponent'; import LogoutComponent from './LogoutComponent'; import FooterComponent from '.. 2023. 11. 26. [React] React.js React 리액트(React)는 Facebook(현 Meta)에서 만든 Javascript 사용자인터페이스(UI) 라이브러리입니다. Facebook은 매우 복잡한 사용자 인터페이스를 가지고 있으며, 수많은 컴포넌트로 구성되어 있습니다. 기존의 방식보다 빠른 UI 렌더링과 반응성 등 페이스북의 성능 요구사항을 충족시키기 위해 2011년 Facebook의 소프트웨어 엔지니어 Jordan Walke는 React를 만들었습니다. 🏷️ 만들어진 이유 웹 개발이 복잡해짐에 따라 html, css, js만으로는 한계가 생겼으며, 초기에는 Web 개발을 위한 프론트엔드 라이브러리로 DOM조작을 쉽게해주는 jQuery 라이브러리가 주로 사용되었습니다. 그러나, 이후 DOM을 직접 조작하는 방식에 한계를 느껴 대규모 프로.. 2023. 11. 24. 이전 1 2 3 4 5 다음
