한 개발자의 노트패드

최근 리액트를 이용해 간단한 사이드 프로젝트를 진행하고 있습니다. 프론트엔드 개발자로써 사실 리액트보다 vue를 쓰는 기간이 더 많아서, 아직 react에 적응하는 기간인데사용하면서 가장 곤란했던 부분이 있습니다. 바로 vue는 양방향의 데이터바인딩을 지원하지만, react는 오직 단방향만 지원한다는 점입니다. 오늘은 이 부분을 단적으로 보여주는 react의 useImperativeHandle에 대해서 적어보도록 하겠습니다. useImperativeHandleuseImperativeHandle은 ref를 통해 부모 컴포넌트에 노출할 인스턴스 값을 사용자 커스텀할 수 있는 기능입니다. 이를 통해 부모 컴포넌트는 자식 컴포넌트에 원하는 인스턴스를 호출할 수있습니다. 주로 fowardRef와 같이 사용합니..

리액트의 setState는 동기적으로 동작하지 않는다 .예를 들어보자 //this.state={ a:123} 일시this.setState({ a: 456})console.log(this.state.a) ; 결과값은 뭐가 나오는걸까? 456이 나와야 정상이지만 456이 아니다. 123이 나올수도 있고 456이 나올수도 있는 것이다. 리액트의 setState는 비동기적으로 동작한다. 동기적으로 동작하지 않기 때문에setState에 값을 넣어도 원하는 값이 나오지 않을 수도 있다.또한 setState는 인자로 전달한 객체를 원래의 state에 덮어씌우는 성향이 있다.예를 들어보자 //this.state = { Year:0, Month:0} 일시this.setState({ Year:2019})//this.sta..

react-router의 NavLink와 activeClssName에 관하여.react-router에서는 다양한 기능을 제공한다.그중NavLink와 activeClassame에 대해 간단하게 알아보자.NavLink는 link와는 다르게 스타일을 바꾸거나 클래스를 활용할 수 있다.할 형식으로라우팅할 주소의 css를 바꿀 수 있다.activeClassName는 class를 활용하는 방법으로 다양하게 이용될 수 있다.형식으로 사용되며 style도 좀더 동적으로 바꿀 수 있다.styled-component를 이용하여 간단한 예를 들어보자localhost:3000/nextex) const menu=styled.div`width:50px;height:50px;$ .selected{background:red;}메뉴1..