일반적으로 부모 컴포넌트의 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 객체에..
React에서 Side Effect는 보통 useEffect() 내부에 넣어 처리하는데 useEffect()는 dependency로 지정한 State가 변경되고 렝더링까지 완료된 이후에 실행됨. 이러한 특성을 이용하면 어떠한 상호작용을 했을 때 알림으로 나타나는 Toast 알림을 쉽게 구현할 수 있음. 일정 시간 후에 토스트를 제거해야 하므로 setTimeout() 타이머를 사용해야 하는데, 타이머 API는 Side Effect이므로 useEffect()에서 처리해줘야 함. 1. Toast 생성 이벤트 핸들러 만들기 토스트는 상위, 하위 컴포넌트에서 상호작용이 발생했을 때 나타나야 하므로 최상위 컴포넌트 App에 두는 편이 좋음. App 컴포넌트에서 토스트를 담을 State를 만들고 토스트를 추가해주는 ..
1. Nullish 병합 연산자 a ?? b a가 null 또는 undefined이면 b를 반환, 아니라면 a를 그대로 반환 어떠한 값이 null, 문자열 중에 하나일 때, 빈 문자열도 falsy값이므로 아래 코드처럼 if 문을 단순하게 작성해주면 안 됨. if (checkAll) { // checkAll이 문자열일 때 실행...? } typeof 연산자를 이용해 해당 변수가 문자열인지 확인하는 방법도 가능하지만 if (typeof checkAll === 'string') { // checkAll이 문자열일 때 실행 } ES6에서 도입된 Nullish 병합 연산자를 이용하면 조금 더 간단하게 작성해줄 수가 있음. if (checkAll ?? false) { // checkAll이 문자열일 때 실행 } [..
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 객체에..
JavaScript/React 2022. 7. 9. 20:40
1. Props를 State에 바로 할당할 때는 주의해야 함 # A. 예시1 function Task(props) { const [dueDate, setDueDate] = useState(props.dueDate); // Props를 State의 초기값으로 할당하고 있음 const [title, setTitle] = useState(props.title); // Props를 State의 초기값으로 할당하고 있음 const onChange = (e) => { /* ... */ }; return ( /* ... */ ); } 컴포넌트가 TaskList > TaskListSection > Task 구조로 되어있을 때, Task에서 할일 만료일 dueDate를 변경하면 onChange 이벤트 핸들러에 의해 St..
JavaScript/React 2022. 7. 9. 16:24
React에서 Side Effect는 보통 useEffect() 내부에 넣어 처리하는데 useEffect()는 dependency로 지정한 State가 변경되고 렝더링까지 완료된 이후에 실행됨. 이러한 특성을 이용하면 어떠한 상호작용을 했을 때 알림으로 나타나는 Toast 알림을 쉽게 구현할 수 있음. 일정 시간 후에 토스트를 제거해야 하므로 setTimeout() 타이머를 사용해야 하는데, 타이머 API는 Side Effect이므로 useEffect()에서 처리해줘야 함. 1. Toast 생성 이벤트 핸들러 만들기 토스트는 상위, 하위 컴포넌트에서 상호작용이 발생했을 때 나타나야 하므로 최상위 컴포넌트 App에 두는 편이 좋음. App 컴포넌트에서 토스트를 담을 State를 만들고 토스트를 추가해주는 ..
JavaScript 2022. 7. 6. 21:45
1. Nullish 병합 연산자 a ?? b a가 null 또는 undefined이면 b를 반환, 아니라면 a를 그대로 반환 어떠한 값이 null, 문자열 중에 하나일 때, 빈 문자열도 falsy값이므로 아래 코드처럼 if 문을 단순하게 작성해주면 안 됨. if (checkAll) { // checkAll이 문자열일 때 실행...? } typeof 연산자를 이용해 해당 변수가 문자열인지 확인하는 방법도 가능하지만 if (typeof checkAll === 'string') { // checkAll이 문자열일 때 실행 } ES6에서 도입된 Nullish 병합 연산자를 이용하면 조금 더 간단하게 작성해줄 수가 있음. if (checkAll ?? false) { // checkAll이 문자열일 때 실행 } [..