React

리액트에서 이벤트 바인딩(Event Binding)을 하는 방법에 대해 알아보도록 하자.각자 다른 핸들 클릭 방식을 사용한 4개의 버튼이 있다. 각각의 버튼을 눌렀을때 어떤 일이 일어나는지 알아보자.콘솔을 살펴보면 버튼을 클릭하지 않았는데 this 객체가 표시되고 버튼

이유 React에서 map 함수를 사용할때 key값을 할당 하지않으면 위와 같은 에러 메시지가 뜬다. React에서 Key는 어떤 항목을 변경, 추가, 삭제할때 식별 해주는 역할을 하기 때문이다. 그래서 엘리먼트에 고유성을 부여하기 위해서는 Key 값을 꼭 할당해

React에서 filter() 메서드를 통해 검색기능을 구현해 보자! filter filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. 사용법 > 내 코드 > 먼저 s에서input 값을 받아올수 있도록 userInp

마이페이지에서 메뉴버튼을 눌렀을때 조건부렌더링으로 선택된 메뉴 페이지를 보여주는 기능을 구현하고 있었다. 메뉴가 4개? 정도여서 삼항연산자나 &&연산자를 사용할수 없었다. 그래서 마음에 들지는 않지만 if else나 switch case로 지저분하게 구현을 해야 하나

useEffect는 class 생명주기 메서드인 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것이다.이중 컴포넌트가 사라질 때(componentWillUnmount) 특정 작업을 처리하는 방법에 대

1. React.memo() 컴포넌트가 동일한 props로 동일한 결과를 렌더링한다면 React.memo를 통해 불필요한 리렌더링을 방지해 성능 최적화를 할 수 있다. 컴포넌트가 React.memo()로 래핑 되면 결과를 메모이징(Memoizing) 하기 때문에 pro

react에서 네이버 지도 api를 통해 지도를 구현하는 데 어려움을 겪어서 사용법을 남겨본다.회원가입 및 등록은 건너뛰고 사용법에 대해 알아보자.index.html에 script를 작성하고 YOUR_CLIENT_ID에 등록한 aplication의 cilient id를

여러 개의 메뉴 중 내가 선택한 메뉴에 특정 스타일을 주고 싶을 때 NavLink를 사용하면 쉽게 구현 가능하다.URL과 to에 지정한 path가 일치할 때 activeStyle과 activeClassName이 활성화된다.NavLink 태그의 activeClassNam