728x90 반응형 SMALL 기술 개발74 리액트를 사용하는 이유 1. 컴포넌트 기반의 화면구성 리액트는 화면의 한 부분을 컴포넌트 라는 단위로 나눌 수 있으며 독립적으로 관리할 수 있습니다. 대규모 웹 애플리케이션에서 컴포넌트는 역할과 기능에 따라 따로 관리하기 용이하며, 반복되는 부분을 대체할 수 있게 해주어서 코드 재사용성을 높여줍니다. 또 컴포넌트 기반의 화면을 구성한다면 블록 쌓기처럼 컴포넌트를 쌓아서 빠르고 효율적으로 화면을 구성할 수 있습니다. 2. Virtual DOM으로 인한 충분히 빠른 속도 Virtual DOM은 UI의 이상적인 또는 “가상”적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 “실제” DOM과 동기화하는 프로그래밍 개념입니다. 이 과정을 재조정이라고 합니다. 이 접근방식이 React의 선언적 API를 가능하게 합니.. 2022. 10. 13. async & await JavaScript - async & await // 콜백지옥 timer(1000, function(){ console.log('작업'); timer(1000, function(){ console.log('작업'); timer(1000, function(){ console.log('작업'); }); }); }); // promise를 사용해서 콜백지옥 벗어남 timer(1000) .then(function(){ console.log('작업') return timer(1000); }) .then(function(){ console.log('작업') return timer(1000); }) .then(function(){ console.log('작업') return timer(1000); }) 더 더 더 편.. 2022. 8. 10. Promise (then, catch) // 1, 2, 4, 3(5초 뒤) Synchronous(동기적) vs Asynchronous(비동기적) Synchronous(동기적): 순차적으로 코드 실행 -> 어떻게 실행될 것인지 파악하기 쉽다 Asynchronous(비동기적): 각자가 자신의 시간표에 따라서 동작 -> 멀티태스킹하는거라 혼란스럽지만, 빠른 속도가 가능함 fetch API https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch 예제 데이터 참고 사이트 https://jsonplaceholder.typicode.com/ /posts 링크 함수를 사용하는데 함수의 return값이 promise면, 함수는 비동기적으로 동작할 가능성이 높다 그 함수가 return 한 값은 .. 2022. 8. 9. Callback 함수 생활코딩 Callback https://www.youtube.com/watch?v=TAyLeIj1hMc&list=PLuHgQVnccGMBVQ4ZcIRmcOeu8uktUAbxI filter 메서드에 대해 정리한 글이다! filter 메서드에 모른다면 참고~!! https://suzzeong.tistory.com/71 arr.filter(callback(element[, index[, array]])[, thisArg]) 여기서 콜백함수는, true를 반환하면 element를 유지하고, false를 반환하면 버린다. element는 판단해야하는 각각의 원소를 말한다. filter 메서드를 사용하여 콜백함수 이해하기! // 1. 콜백 함수 쓰는 방법 words = ['spray', 'limit', 'elite.. 2022. 8. 5. About Redux 1. 리덕스가 필요한 이유 (1) useState의 불편함 어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때 Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었다. 근데 Props로 State를 공유하는 방법에는 불편한 점이 있다. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 한다. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미한다. (조부모 → 부모 → 손자) 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다. 이러한 불편함 겪지 않기 위해 새로운 도구인.. 2022. 8. 5. React Hooks(useEffect) 1. useEffect (1) useEffect는 언제 사용할까? useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶거나 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면 useEffect를 사용한다. useState와 마찬가지로 React에서 제공하는 훅 (기능) 이므로, import React, { useEffect } from "react"; 로 import 해서 사용한다. (2) 코드로 보는 useEffect 기초 // src/App.js import React, { useEffect } from "react"; const App = () => { useEf.. 2022. 8. 4. 이전 1 ··· 3 4 5 6 7 8 9 ··· 13 다음 728x90 반응형 LIST
