차곡차곡

SPA SPA는 Single Page Application의 약어로, 말 그대로 한 개의 페이지로 이루어진 애플리케이션을 의미한다. 페이지로 구성된 웹 애플리케이션을 만들 때 페이지별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것이 바로 라우팅 시스템이다. 기존에는 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아 오고, 페이지를 로딩할 때마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여주었다. 사용자 인터랙션이 별로 없는 정적인 페이지에서는 이러한 방식이 적합하지만, 사용자 인터랙션이 많고 다양한 정보를 제공하는 모던 웹 애플리케이션에서는 적합하지 않다. SPA의 경우 html을 한 번만 받아와서 웹 애플리케이션을 실행시킨 후, 그 이후에..

구현한 것 팔레트에서 선택한 색 진하게 표시 지난 실습 때 구현하지 못한 선택한 팔레트 색 진하게 표시하는 부분을 해결했다! 현재 선택된 색을 palette 컴포넌트에 props로 함께 넘겨줘서 팔레트 컴포넌트 배열을 생성할 때 현재 생성하려는 palette 컴포넌트의 색이 넘어온 색과 동일한지 검사하고, 동일하면 투명도를 1로 설정하도록 했다! import React from "react"; const Palette = ({ colorList, onClick, nowColor }) => { console.log(nowColor); const colors = colorList.map((color, indx) => ( { onClick(color); }} > )); return {colors}; }; ex..

useCallback useCallback 함수는 useMemo와 비슷한 함수로, 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다. 이 Hook을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다. const onChange = useCallback(e => { setNumber(e.target.value); }, []); // 컴포넌트가 처음 렌더링될 때만 함수 생성 const onInsert = useCallback(() => { const nextList = list.concat(parseInt(number)); setList(nextList); setNumber(“); }, [number, list]); // number 혹은 list가 바뀌었을 때만 함수 생성 useCallback..

구현한 것 팔레트 기능 추가 알게 된 것 1. App에서 생성한 리스트를 Palette 컴포넌트에 props로 전달해서 컴포넌트 배열을 반환하는 부분에서 계속 에러가 났다. Palette.js:4 Uncaught TypeError: colors.map is not a function 그리고 내가 작성한 코드 ,,,, import React from "react"; const Palette = (colors) => { console.log(colors); const colorList = colors.map((color, indx) => {color}); return {colorList}; }; export default Palette; 리액트 잘 아는 사람들이 보면 진짜 콧방귀 칠 실수 ㅠ props 제일..

useState useState는 함수형 컴포넌트에서 가변적인 상태를 지닐 수 있도록 한다. 자세한 정리 : https://amor-fati.tistory.com/84 useEffect useEffect는 컴포넌트가 렌더링되거나 사라질 때 특정 작업을 수행할 수 있도록 한다. 또한 컴포넌트의 props나 상태가 바뀌어서 업데이트 될 때 혹은 업데이트 되기 전에도 작업을 하도록 한다. useEffect(() => { (컴포넌트가 생길 때 수행 작업); return { (컴포넌트가 사라질 때 수행 작업); } }, [의존성]) 마운트될 때만 실행하고 싶을 때 만약 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트될 때는 실행되지 않게 하고 싶다면 함수의 두 번째 파라미터에 빈 배열을..

구현한 것 할 일 추가 기능 할 일 삭제 기능 할 일 체크/해제 기능 알게 된 것 컴포넌트끼리 ref를 사용하여 직접 데이터를 전달할 순 있지만 이는 매우 비효율적인 방법이다. 일종의 안티패턴으로 컴포넌트가 많아지면 유지보수가 힘들어진다. 따라서 컴포넌트들은 부모를 통해 대화를 해야 한다! 참고 자료 : https://velopert.com/3480 참고 자료 코드가 클래스형 컴포넌트로 적혀있어서 잘못 골랐나 싶었는데 오히려 안 보고 함수형 컴포넌트로 구현 연습해볼 수 있어서 좋은 것 같다!

1, 자바스크립트 배열의 map() 함수 map 함수는 파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. arr.map(callback, [thisArg]) callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세 가지가 있다. currentValue: 현재 처리하고 있는 요소 index: 현재 처리하고 있는 요소의 index 값 array: 현재 처리하고 있는 원본 배열 thisArg(선택 항목): callback 함수 내부에서 사용할 this 레퍼런스 // 배열 요소를 제곱하여 새로운 배열 생성 const numbers = [1, 2, 3, 4, 5]; const result = numbers.map(num => ..

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예를 들어 버튼에 마우스 커서를 올릴 때 발생하는 onmouseover 이벤트, 클릭할 때 발생하는 onclick 이벤트 등을 말한다. 이벤트 사용할 때 주의 사항 1. 이벤트 이름은 카멜 케이스 형태로 작성한다.2. 이벤트에 자바스크립트 코드가 아닌 함수 형태의 객체를 전달한다.3. DOM 요소에만 이벤트를 설정할 수 있다. (직접 만든 컴포넌트에 이벤트를 자체적으로 설정할 수 없다.) onChange={ (e) => { console.log(e.target.value); } } * e 객체는 SyntheticEvent로 웹 브라우저의 네이티브 이벤트를 감싸는 객체이다. 참고 자료 : https://thebook..