frontend (React) 개발17 (React) useState 값 변경 1. 독립변수 선언const [value, setValue] = useState(0);새로운 값을 설정 setValue(3)}>click 기존 값을 변경 setValue(prev => prev + 1)}>click 2. 리스트 변수선언const [value, setValue] = React.useState(["a", "b", "c"]); 초기화 setValue([ ])}>click 값 추가 setValue(prev => [...prev, "d"])}>click 특정값 삭제 setValue(prev => prev.filter(item => item !== "a"))}>click 특정 인덱스 삭제 setValue(prev => prev.filter((item, index) => index !== 0))}.. 2024. 5. 16. (React) form data event 처리 아래와 같은 form 디자인이 있고 입력데이터를 보관하기 위해 오른쪽과 같이 useState 를 정의 할 수 있다.const [data, setData] = useState( { address1: "", address2: "", zip: "", city: "", state: "", country: "", }); 이벤트 정의의 비효율 코드와 효율적인 코드 예비효율적 코드효율적 코드control의 이름을 onChange의 argument로 전달control 의 name 프로퍼티를 지정하고 event.target.name 으로 꺼내서 사용 const onChange = (key) .. 2024. 5. 12. (React) useCallback function factory(a, b) { return a + b; } const sumFunc1 = factory(); const sumFunc2 = factory();console.log(sumFunc1(1, 2)); // => 3 console.log(sumFunc2(1, 2)); // => 3console.log(sumFunc1 === sumFunc2); // => false console.log(sumFunc1 === sumFunc1); // => true같은 factory함수를 가르킨다고 해도 인스턴스 오브젝트는 서로 다르다. 또한 렌더링이 자주 반복되는 경우에도 이전 인스턴스와는 다른 sumFunc1과 sumFunc2 인스턴스가 생성된다. 그럼 언제 useCallback 필요할까?일단.. 2024. 5. 7. (React) map 에 의한 루프에서 표시가 되지 않는 문제 { } 로 감싸여져 있는 경우 반드시 return 이 없는 경우 아무것도 표시되지 않는다.return ( { this.state.task.map((item,contentIndex) => { ( hello {item.event} {item.eventpara} ) }) } ) 해결책 1) return 을 명시return ( { this.state.task.map((item,contentIndex) => { return ( hello {item.event} {item.eventpara} ) }) } ) 해결책 2) { } 를 제거return ( { this... 2024. 5. 7. 이전 1 2 3 4 5 다음
