차곡차곡

구현한 것 팔레트에서 선택한 색 진하게 표시 지난 실습 때 구현하지 못한 선택한 팔레트 색 진하게 표시하는 부분을 해결했다! 현재 선택된 색을 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..

state는 컴포넌트 내부에서 바뀔 수 있는 값으로, state가 수정 됐을 때 페이지를 다시 그리지 않아도 UI 업데이트가 가능하기 때문에 SPA의 핵심 요소라고 할 수 있다. 리액트에는 클래스형 컴포넌트가 지니고 있는 state와 함수형 컴포넌트에서 useState라는 함수를 통해 사용되는 state 두 가지 종류가 있다. useState 함수는 함수형 컴포넌트에서도 상태 관리를 할 수 있도록 리액트 16.8에서 도입된 Hooks 기능 중 하나다. 함수의 인자에는 상태의 초깃값을 넣어준다. 값의 형태는 숫자, 문자열, 객체, 배열 등 자유롭다. 함수를 호출하면 배열이 반환되는데, 이때 첫 번째 원소는 현재 상태, 두 번째 원소는 상태를 바꿔주는 세터(Setter) 함수이다. state 값을 바꿔야 할..