1. React에서 이미지를 불러오기 React에서 네트워크 요청으로 이미지를 받아 화면에 나타내고자 할 때, 아래처럼 src에 직접 링크를 넣어 불러오도록 할 수 있음. const Image = () => { return ( ); } 이미지 용량이 크지 않을 경우, 이 방법도 문제가 없지만 이미지의 용량이 커지면 아래 사진처럼 이미지가 로드될 때까지 사용자는 빈 화면이나 잘린 이미지만 보게 되어 바람직하지 않음. 이미지를 보여주는 컴포넌트가 App 컴포넌트 등 첫화면에 바로 보이는 컴포넌트라면 로딩 컴포넌트를 이용하는 방법이 있지만, Image 컴포넌트처럼 그것의 하위 컴포넌트라면 첫 화면에서 로딩, Image 컴포넌트를 렌더링하고 로딩하는 워터폴 문제가 발생함. 현재 Image 컴포넌트는 에 src ..
네트워크 요청을 처리하다 보면 이전 요청과 현재 요청 간에 경쟁 상태(Race Condition)가 발생해 예상치 못한 버그가 발생하기도 함. 예를 들어, 사용자가 A 요청을 보냈다가 A 요청에 대한 응답이 처리되기 전에 B 요청을 보내는 경우를 생각해볼 수 있음. 만약, B 요청에 대한 응답이 먼저 도착해 UI에 반영되고 나서 A 응답이 도착한다면 어떻게 될까? 앱에 이러한 경쟁 상태를 처리하는 로직이 없다면 A 응답으로 UI가 다시 교체되는 버그가 발생함. 이러한 문제를 해결하기 위한 방법이 있는데... 1. useEffect에서 변수 선언하기 useEffect() 내부에 didCancel이라는 변수를 하나 선언함. 이 변수는 네트워크 요청이 실행될 때마다 false로 초기화되고, 네트워크 응답이 도..
일반적으로 부모 컴포넌트의 State, Props가 변경되면 부모 컴포넌트의 State를 Props로 전달받든, 아니든 모든 자식 컴포넌트는 재렌더링됨. 하지만, children 속성을 사용하는 컴포넌트는 State 변경에 대해 다르게 작동함. function App() { const [state, setState] = useState(0); return ( setState(state + 1)}>App 업데이트 ); } function Parent({ children }) { const [state, setState] = useState(0); return ( setState(state + 1)}>Parent 업데이트 {children} ); }; App 컴포넌트는 자식 컴포넌트로 Parent, Chil..
정규 표현식 ko.javascript.info RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com 1. Javascript에서 정규표현식 사용하기 String.replace(), String.match() 등의 메서드는 정규표현식을 사용할 수 있는데 아래와 같은 형식으로 정규표현식을 넣어줄 수 있음. / /* 정규표현식 삽입 */ /플래그 const str = "a..bcd."; str.match(/[a-z]/); // 소문자 a~z까지 검사 str.replace(/\./g, "") // 모든 "." 문자를 제거(빈 문자..
1. Set 객체 # 수학의 집합을 구현하는 Javascript의 자료 구조로, 중복되지 않는 유일한 값들만 가지는 객체. Set() 생성자 함수는 iterable 객체(배열, 문자열 등)만 인수로 받으며 iterable 객체 안에 어떠한 값도 입력받을 수 있음. 아래와 같이 Set 객체를 만드는 게 가능함. const set = new Set([{ prop: 1 }, 1, 1, 2, () => {}, "aa"]) A. 저장가능한 데이터 Set 객체의 원소로 원시 자료형, 참조 자료형 모두 가능하지만, 참조 자료형은 메모리에 주소값이 저장된다는 점을 유념해야 함. 위 set 객체에 () => {}를 한번 더 추가하려고 할 때 set 객체에 저장된 () => {}와 새로 추가할 () => {}는 주소값이 ..
1. React에서 canvas 사용하기 캔버스는 DOM을 조작해야 하므로 useRef(), useEffect()를 사용해야 함. 한편, 캔버스는 React에서 재렌더링이 되지 않아도 화면에 그림이 나타나므로 캔버스와 관련된 변수는 특별한 경우가 아닌 한 State로 관리할 필요가 없음. export default function Drawing() { const canvas = useRef(null); return ; } useRef()를 이용해 요소를 선택하고, canvas 객체에 요소가 제대로 담기는 시점(Drawing 컴포넌트 렌더링이 완료되는 시점 이후)에 컨텍스트를 생성할 수 있음. export default function Drawing() { const canvas = useRef(null)..
1. Context API # Context API를 이용하면 여러 컴포넌트에서 사용해야 하는 State를 한번에 Props로 내려줄 수 있음. 하지만, Context API를 사용하면 상위, 하위 컴포넌트가 더 밀접하게 결합하게 되어 컴포넌트의 재사용성을 훼손하게 되므로 단지 Props Drilling을 해결하고자 하는 게 목적이라면 컴포넌트 합성을 쓰는 것이 더 간단함. A. Context 생성 # // App.jsx import { createContext } from "react"; export const AppContext = createContext(null); B. Context 값 전달하기 const App = () => { return ( ); } 앞서 만들어준 AppContext 객체에..
JavaScript/React 2022. 8. 13. 21:51
1. React에서 이미지를 불러오기 React에서 네트워크 요청으로 이미지를 받아 화면에 나타내고자 할 때, 아래처럼 src에 직접 링크를 넣어 불러오도록 할 수 있음. const Image = () => { return ( ); } 이미지 용량이 크지 않을 경우, 이 방법도 문제가 없지만 이미지의 용량이 커지면 아래 사진처럼 이미지가 로드될 때까지 사용자는 빈 화면이나 잘린 이미지만 보게 되어 바람직하지 않음. 이미지를 보여주는 컴포넌트가 App 컴포넌트 등 첫화면에 바로 보이는 컴포넌트라면 로딩 컴포넌트를 이용하는 방법이 있지만, Image 컴포넌트처럼 그것의 하위 컴포넌트라면 첫 화면에서 로딩, Image 컴포넌트를 렌더링하고 로딩하는 워터폴 문제가 발생함. 현재 Image 컴포넌트는 에 src ..
JavaScript/React 2022. 8. 13. 16:34
네트워크 요청을 처리하다 보면 이전 요청과 현재 요청 간에 경쟁 상태(Race Condition)가 발생해 예상치 못한 버그가 발생하기도 함. 예를 들어, 사용자가 A 요청을 보냈다가 A 요청에 대한 응답이 처리되기 전에 B 요청을 보내는 경우를 생각해볼 수 있음. 만약, B 요청에 대한 응답이 먼저 도착해 UI에 반영되고 나서 A 응답이 도착한다면 어떻게 될까? 앱에 이러한 경쟁 상태를 처리하는 로직이 없다면 A 응답으로 UI가 다시 교체되는 버그가 발생함. 이러한 문제를 해결하기 위한 방법이 있는데... 1. useEffect에서 변수 선언하기 useEffect() 내부에 didCancel이라는 변수를 하나 선언함. 이 변수는 네트워크 요청이 실행될 때마다 false로 초기화되고, 네트워크 응답이 도..
JavaScript/React 2022. 8. 9. 17:35
1. Referential Equality React에서는 Referential Equality Check(Object.is())를 이용해 State, Props 변경을 감지함. State가 원시 자료형이면 State를 덮어씌워 변경해도 문제가 없지만, 배열/객체 등 참조 자료형이라면 해당 속성의 주소값이 바뀌지 않기 때문에 React에서는 State, Props가 변경되지 않았다고 판단할 수 있음. const obj1 = { p1: { innerP: 0 }, p2: 1 }; const obj2 = { ...obj1 }; const obj3 = { p1: { innerP: 0 }, p2: 1 }; console.log(Object.is(obj2, obj1)); // false: 두 객체 다르므로 렌더링 ..
JavaScript/React 2022. 8. 7. 16:43
일반적으로 부모 컴포넌트의 State, Props가 변경되면 부모 컴포넌트의 State를 Props로 전달받든, 아니든 모든 자식 컴포넌트는 재렌더링됨. 하지만, children 속성을 사용하는 컴포넌트는 State 변경에 대해 다르게 작동함. function App() { const [state, setState] = useState(0); return ( setState(state + 1)}>App 업데이트 ); } function Parent({ children }) { const [state, setState] = useState(0); return ( setState(state + 1)}>Parent 업데이트 {children} ); }; App 컴포넌트는 자식 컴포넌트로 Parent, Chil..
JavaScript 2022. 8. 2. 17:46
구조 분해 할당 ko.javascript.info 1. 구조분해 할당(Destructuring Assignment) const [left, right] = [1, 2]; const { data } = { data: [0, 1, 2, 3] } console.log(left); // 1 console.log(data); // [0, 1, 2, 3] 배열, 객체 구조분해 할당의 기본적인 사용법은 위와 같음. 2. 원하는 속성을 다른 변수명으로 지정하기 const obj = { data: { id: 1, title: "제목", date: "2022-08-01" } } const { data: entry } = obj; console.log(data); // Uncaught ReferenceError: data ..
JavaScript/React 2022. 7. 31. 19:29
const Toast = ({ text, dismissTime }) => { // dismissRime: Toast 컴포넌트가 언마운트되는 시간 const [isFading, setIsFading] = useState(false); // 클래스 부여에 이용할 State useEffect(() => { let mounted = true; setTimeout(() => { if (mounted) { setIsFading(true); } }, dismissTime - 500) // 애니메이션 시간만큼 빼서 setTimeout() 실행 return () => { mounted = false } }, []) // 'fade-out' 클래스가 있으면 사라지는 애니메이션 실행 return ( {text} ) } To..
JavaScript 2022. 7. 25. 14:23
정규 표현식 ko.javascript.info RegExr: Learn, Build, & Test RegEx RegExr is an online tool to learn, build, & test Regular Expressions (RegEx / RegExp). regexr.com 1. Javascript에서 정규표현식 사용하기 String.replace(), String.match() 등의 메서드는 정규표현식을 사용할 수 있는데 아래와 같은 형식으로 정규표현식을 넣어줄 수 있음. / /* 정규표현식 삽입 */ /플래그 const str = "a..bcd."; str.match(/[a-z]/); // 소문자 a~z까지 검사 str.replace(/\./g, "") // 모든 "." 문자를 제거(빈 문자..
JavaScript 2022. 7. 23. 15:22
1. Set 객체 # 수학의 집합을 구현하는 Javascript의 자료 구조로, 중복되지 않는 유일한 값들만 가지는 객체. Set() 생성자 함수는 iterable 객체(배열, 문자열 등)만 인수로 받으며 iterable 객체 안에 어떠한 값도 입력받을 수 있음. 아래와 같이 Set 객체를 만드는 게 가능함. const set = new Set([{ prop: 1 }, 1, 1, 2, () => {}, "aa"]) A. 저장가능한 데이터 Set 객체의 원소로 원시 자료형, 참조 자료형 모두 가능하지만, 참조 자료형은 메모리에 주소값이 저장된다는 점을 유념해야 함. 위 set 객체에 () => {}를 한번 더 추가하려고 할 때 set 객체에 저장된 () => {}와 새로 추가할 () => {}는 주소값이 ..
JavaScript/React 2022. 7. 22. 21:18
1. React에서 canvas 사용하기 캔버스는 DOM을 조작해야 하므로 useRef(), useEffect()를 사용해야 함. 한편, 캔버스는 React에서 재렌더링이 되지 않아도 화면에 그림이 나타나므로 캔버스와 관련된 변수는 특별한 경우가 아닌 한 State로 관리할 필요가 없음. export default function Drawing() { const canvas = useRef(null); return ; } useRef()를 이용해 요소를 선택하고, canvas 객체에 요소가 제대로 담기는 시점(Drawing 컴포넌트 렌더링이 완료되는 시점 이후)에 컨텍스트를 생성할 수 있음. export default function Drawing() { const canvas = useRef(null)..
JavaScript/React 2022. 7. 20. 22:30
1. Context API # Context API를 이용하면 여러 컴포넌트에서 사용해야 하는 State를 한번에 Props로 내려줄 수 있음. 하지만, Context API를 사용하면 상위, 하위 컴포넌트가 더 밀접하게 결합하게 되어 컴포넌트의 재사용성을 훼손하게 되므로 단지 Props Drilling을 해결하고자 하는 게 목적이라면 컴포넌트 합성을 쓰는 것이 더 간단함. A. Context 생성 # // App.jsx import { createContext } from "react"; export const AppContext = createContext(null); B. Context 값 전달하기 const App = () => { return ( ); } 앞서 만들어준 AppContext 객체에..