리액트19 [React] 리액트에서 onClick 이벤트핸들러에 매개변수(파라미터) 전달하기 리액트에서 onClick 함수를 사용할때, 아래와 같이 id값을 인자로 넘겨줘야하는 경우가 발생했다. 🐬 처음 시도했던 방법 const deleteClick = (id) => { const newTodos = todos.filter((todo) => todo.id !== id); setTodos(newTodos); }; return( ); 무작정 자바스크립트에서 사용했던 방식으로 위에서 생성한 함수에 원하는 파라미터를 넘겨주었다. 그러자 내가 원래 예상했던 결과가 발생하지 않았다..😅 이렇게 작성할 경우, 리액트에서는 화면이 계속 렌더링되면서 버튼을 누르지 않더라도 계속, 이벤트가 발생되기 때문에 우리가 특정 이벤트를 발생시켰을 때 얻는 결과를 볼 수 없게 된다!!! 분명 이전에 공부했을 때 이벤트 핸들.. 2023. 4. 17. [React] 함수형 컴포넌트의 생명주기(Life Cycle) 🌷 리액트 생명주기 용어 용어 설명 ~ will 어떤 작업을 수행하기 전에 실행되는 메서드와 관련된 용어 ~ did 어떤 작업을 수행한 이후에 실행되는 메서드와 관련된 용어 mount 컴포넌트 내에서 DOM이 생성되고 웹 브라우저 상에 나타나는 메서드와 관련된 용어 unmount 컴포넌트 내에서 DOM을 제거하는 메서드와 관련된 용어 update 컴포넌트 내에서 변화가 발생하였을 때 수행하는 것 🌷 리액트 생명주기 👉 클래스형 컴포넌트와 라이프사이클 라이프 사이클이 컴포넌트 중심에 맞춰져있음 따라서, 클래스가 마운트 되려할 때(componentWillMount), 마운트 되고 나서(componentDidMount), 업데이트 되었을 때(componentDidUpdate), 언마운트(componentWil.. 2023. 4. 15. [React] 리액트에서 불변성이란 🦄 불변성이란? 불변성이란? 메모리에 있는 값을 변경할 수 없는 것을 말한다. 원시 데이터(string, number, boolean, null, undefined, Symbol): 불변성 있다. 원시데이터는 수정시, 메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장 원시 데이터가 아닌 데이터(Object타입: 객체, 배열, 함수 ..): 불변성 없다. 원시데이터가 아닌 데이터는 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 변경 자바스크립트에서 기본형 데이터와 참조형 데이터의 불변성 정리: https://yooneeee.tistory.com/40 🦄 리액트에서 상태 불변성 리액트에서 불변성의 지키는 것이 중요한 이유 👉 리액트가 상태 업데이트를 하는 .. 2023. 4. 15. 이전 1 2 3 4 5 다음
