.log('FE')

사내에서 사용할 UI 라이브러리를 만들면서 다른 UI 라이브러리들의 내부를 분석하였는데 공통적으로 쓰이고 있는 forwardRef() 에 대해서 궁금증을 갖고 알아보게 되었습니다. # Ref ref 는 참조라는 뜻을 갖고 있습니다. 우선 리액트에서 사용되는 Ref 에 대해서 알아보았습니다. Ref 는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. 리액트에서는 props 를 통해서 부모에서 자식으로 단방향으로 데이터를 내려주고 있습니다. 자식 컴포넌트가 수정되기를 원한다면 새로운 props 를 전달하여 리렌더링을 통해 수정을 할 수 있습니다. 그러나 가끔 직접 자식을 수정해야 할 경우가 있을 수 있습니다. 리액트 공식문서에서 Ref 를 사용해야하는 바람직한 ..

이전글 : 2021.12.16 - [프론트엔드/React] - React Lifecycle - class & hook 1부 React Lifecycle - class & hook 1부 리액트의 생명주기에 대해서 정리하려고합니다. 자주 사용하는것만 당연하게 사용하고있다보니 자세히 설명하려고 하면 항상 공식문서나 다른 자료들을 참고하게되어서 이참에 그냥 블로그에 code-reading.tistory.com class - update 리액트의 클래스 컴포넌트의 업데이트를 처리하는 호출 순서는 아래와 같습니다. static getDerivedStateFromProps() shouldComponentUpdate() render() getSnapshotBeforeUpdate() componentDidUpdate()..

리액트의 생명주기에 대해서 정리하려고합니다. 자주 사용하는것만 당연하게 사용하고있다보니 자세히 설명하려고 하면 항상 공식문서나 다른 자료들을 참고하게되어서 이참에 그냥 블로그에 정리를 한번 해두고 필요할때마다 해당 글만 볼 수 있도록 하려는 목적입니다. 리액트의 컴포넌트는 두가지 방식으로 작성할 수 있습니다. class 컴포넌트와 function 컴포넌트 입니다. function 컴포넌트는 hook 이 공식적으로 리액트에서 사용됨에 따라서 class => function 컴포넌트로 많이 넘어오고 있습니다. class 와 function 을 함께 사용하고 있거나 마이그레이션을 하려면 두 방식에 대한 생명주기를 모두 이해하고 있어야 합니다. 그래서 두가지 방식을 비교하면서 작성합니다. React lifecy..

지난 5년간 npm 다운로드수를 확인해 봤습니다. 리액트는 이제 명실상부 프론트엔드 개발에 대표적인 라이브러리로 자리잡은것같습니다. 버전도 벌써 17.x.x 대 버전으로 꾸준한 업데이트와 최신화가 진행되고 있는걸 확인할 수 있습니다. 그만큼 자바스크립트의 중요성은 더 높아지면서 리액트에 대한 이해를 하는것도 중요해진것같습니다. 그래서 이버 포스팅에서는 리액트가 갖는 주요 특징들 위주로 실제 리액트코드는 어떻게 구성되어있나 확인하면서 리액트의 동작에 대해 알아보려고 합니다. JSX 리액트에서는 JSX 문법을 통해서 자바스크립트파일에 마크업 로직을 넣을 수 있습니다. 이 방식덕분에 UI 별로 컴포넌트를 생성하여 재사용하고 동적인 돔을 쉽게 생성해낼 수 있습니다. 순수 자바스크립트로 이런 재사용성있는 컴포넌트..