나는개발자니까

리액트를 다루기에 앞서, 리액트 코드의 기반이 되는 자바스크립트에 대해 먼저 공부하는 것이 좋다. 단순히 리액트 코드를 작성하는 것이 아니라 웹 애플리케이션이 작동하는 이면에서 리액트가 수행하는 작업을 이해하려면 자바스크립트의 기초를 먼저 다지는 것이 중요하다. 1. 자바스크립트의 동등 비교 리액트 함수형 컴포넌트와 훅을 반복적으로 작성하다 보면 의존성 배열 (dependencies)에 대해 고민하게 된다. 보통은 리액트에서 제공하는 eslint-react-config에 선언되어 있는 react-hooks/exhaustive-deps의 도움을 받아 해당 배열을 채우는데, 실제로 이것이 어떤 식으로 작동하는지, 왜 이런 변수를 써야하는지 이해 못하는 경우가 많다. 렌더링에서도 마찬가지이다. 리액트 컴포넌트..

리액트에 대한 회의적인 의견과 비판 페이스북은 JSConf US에서 리액트와 함께 embedded XML인 JSX를 공개했다. 하지만 JSConf US 2013에서 공개된 리액트에 대한 반응은 좋지 못했다. HTML과 JS는 항상 다른 파일에 존재했고 이를 컴퓨터 공학에서 말하는 관심사 분리의 원칙을 지키기 위한 기초적인 사실로 받아들였기 때문에 그 당시 관점에서는 JSX는 비난받았다. 사실 리액트는 관점이 기존과 다를 뿐 자세히 보면 관심사 분리 원칙을 따른다고 할 수 있다. 당시의 관심사 분리는 HTML, JS, CSS가 다른 폴더와 파일로 분리되었지만, 리액트는 피드 컴포넌트의 JSX와 CSS, 릴스의 JSX와 CSS로 나눠지는 것처럼 컴포넌트의 역할에 따라 관심사가 분리된 것이다. 페이스북 팀은 ..

왜 리액트를 배워야 하는가? 요즘 리액트는 채용시장에서 대부분 리액트에 대한 개발 경험을 요구한다. 따라서 리액트는 프론트엔드 개발자에 있어서 필수적인 기술이라고 생각한다. 추가적으로 전자정부 표준 프레임워크의 프론트엔드 개발 도구로 채택되면서 안정성과 유지보수성이 보장되었고 많은 개발자들이 리액트를 쓴다는 것을 알 수 있다. 그렇다면 왜 리액트가 주목받고 선호하고 라이브러리가 되었을까? 1. 명시적인 상태 변경을 한다. 리액트는 데이터의 흐름이 한쪽으로 가는 단방향 바인딩이다. 리액트의 상태 변화는 단방향, 즉 명시적으로 이루어진다. 리액트의 상태가 변화했다면 그 상태 변화를 명시적으로 일으키는 함수를 찾으면 된다. 양방향 바인딩을 쓰는 Angular와 비교한다면, React는 Angular에 비해 데..