본문 바로가기

분류 전체보기67

[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.
[Git/error] git push 오류 해결(Updates were rejected because the tip of your current branch is behind)-with.소스트리 계속 VSCode로만 코드를 짜고, github에 커밋하는 습관이 안들여지는 것같아서 오늘 공부했던 내용들을 github에 push를 하려고 하자 갑자기 아래와 같은 오류가 발생하였다. 왜 나에게만 이런 일이ㅜ 에러에 관해 찾아보니까 원인은 1. 깃 repository를 생성할 때 README.md를 생성해서 생기는 오류 2. 이미 기존에 push해놓은 파일이 있어서 데이터 유실 등의 문제가 있을 수 있어 git에서 처리되지 않도록 에러를 띄우는 것 이렇다고 한다.. 해당 repository를 살펴보니 README파일은 없는 것 같아 1번 오류는 아닌 것 같고, 2번이 원인인 것 같다. (because the tip of your current branch is behind) 원격 저장소의 최종 comm.. 2023. 4. 13.