윤자이 기술블로그

React Element와 Virtual Dom 앞서 리액트는 랜더링 성능을 향상하기 위해서 메모리에 가상 돔을 올려놓고 이전과 이후의 가상 돔을 비교해서 변경된 부분만 실제 돔에 반영하는 전략을 채택했다고 이야기했습니다. 이렇게 하는 이유는 실제 브라우저에서 돔을 변경하는 것은 비교적 오래 걸리는 작업이기 때문에 필요한 부분만 리렌더링 해줌으로써 불필요한 자원 손실을 방지할 수 있기 때문입니다. 우리는 리액트 코드를 JSX라는 새로운 문법으로 작성하게 되고 해당 코드는 리액트의 createElement 함수로 변경된다는 것을 알았습니다. 이 createElement 함수는 함수 이름대로 리액트 요소를 반환하는 함수입니다. 아래는 JSX 코드가 트랜스 컴파일되어 createElement 함수로 변경된 예..

※ 해당 포스팅은 state / props에 대한 어느 정도 기본적인 지식이 있다는 전제로 상태와 속성으로 data를 관리하는 react의 특성을 중점적으로 살펴보도록 하겠습니다. props와 state는 react component에서 데이터를 다루는 대표적인 두 가지 방법입니다. Props와 State를 요약해서 설명하자면 props는 부모 컴포넌트가 자식 컴포넌트에게 주는 데이터이고 해당 데이터는 직접적으로 수정할 수 없는 값입니다. 반면 state는 컴포넌트 내부에서 가지고 있는 값으로써 변경할 수 있는 값입니다. props와 state는 react에서 가장 핵심적인 개념 중 하나입니다. 나중에 다뤄보게 될 redux와 같은 전역 데이터를 관리해주는 라이브러리도 결국 이 props와 state를 ..

React.js를 공부하다 보면 필연적으로 한 번씩 듣게 되는 키워드가 바로 바벨과 웹팩입니다. 이 둘에 대해 자세히 알지 못하더라도 당장 리액트 개발을 하지 못하는 것은 아닙니다. 왜냐하면 리액트 팀에서 번거로운 바벨과 웹팩 설정을 create-react-app이라는 프로젝트를 통해서 아주 간편하게 설정하고 끝낼 수 있도록 도움을 주고 있기 때문입니다. 하지만 앞선 포스팅에서 이야기했듯이, 단순히 프레임워크 자체를 이해하기보다는 그 원리를 이해하고 더 나은 개발자가 되기 위해선 babel과 webpack이 왜 필요하고, 어떤 일을 하는지에 대해서 알고 넘어가 필요가 있습니다. 해당 포스팅에서는 바벨과 웹팩을 아주 간단하게 소개하고, 어떤 역할을 하는지에 대해서 살펴보도록 하겠습니다. (이후 좀 더 심화..

Web Front-End 개발에 관심이 있는 개발자라면 한 번쯤은 React라는 말을 들어보았을 것입니다. 리액트는 현재 그만큼 현재 Front-End 영역에서 가장 핫한 라이브러리 중 하나입니다. javascript는 원래 별로 각광받지 못한 언어였습니다. 하지만 node.js가 등장하면서 서버로 사용되기 시작하고 백엔드와 프론트엔드의 영역이 확실히 분리되기 시작하며 angular.js를 시작으로 SPA라는 기술이 나오기 시작했고, 현재는 그 마저도 지며 그 자리를 React.js와 Vue.js가 차지해 가고 있습니다. React와 Vue는 사실상 기본 원리가 비슷합니다. 그 예로 Vue의 개발자가 실제로 React를 참고하여 개발했다고 언급한 적도 있습니다. React.js는 현존하는 프론트엔드 프레..