조스의 개발먹방

🚀 들어가며... 실무에서 자주 사용하고, 자주 보이는 React.Fragment 에 대해 왜 사용하는지, 사용방법은 어떻게 되는지 정리하여 포스팅 해보도록 하겠습니다. 📑 내용 React.Fragment의 개념은 어떻게 될까요? Fragment는 React v16에 추가된 기능입니다. 컴포넌트가 여러 엘리먼트를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 하는데, 이때 fragment를 사용하면 dom에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다고 합니다. (공식문서 설명) 공식문서의 설명은 좀 말이 어려워서 진짜 간단하게 설명 드리자면 이것입니다. 어떤 컴포넌트에서 아래와 같이 return을 한다면 어떻게 될까요? return ( Hello world! Th..

🚀 들어가며... React 컴포넌트를 정의할 때에 PureComponent를 사용했었는데, 이 컴포넌트는 도대체 어떤것인지, 왜 사용해야 하는지 알아봅시다. 📑 내용 React에는 3가지 Component들이 존재합니다. React.Component class MainContainer extends Component { render() { return ( Hello ) } } React.PureComponent class MainContainer extends PureComponent { render() { return ( Hello ) } } Function Component const MainContainer = () => { return ( Hello ) }; 각 컴포넌트들의 세세한 특징들이 있겠..

🚀 들어가며... 동기(Syncronous)와 비동기(Asynchronous)는 프로그래밍 언어에서 중요한 개념입니다. 동기는 요청 후 응답을 받아야 다음 동작을 실행하는 방식을 말하며 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행하는 방식입니다. 자바스크립트에서 동기와 비동기 자바스크립트는 단일 스레드 프로그래밍 언어로 단일 호출 스택이 있어 한 번에 하나의 일을 처리할 수 있습니다. 그러므로 자바스크립트는 동기 방식으로 진행이 됩니다. 하나의 호출 스택만 있기 때문에 하나의 함수를 처리하는데 매우 오랜 시간이 걸린다면 다음 실행해야할 함수에 지장을 줄 수 있다는 문제가 발생합니다. 이 부분이 바로 비동기의 필요성입니다. 단일 호출 스택을 가진 자바스크립트에서 비동기를 구현할 수 있게 하는..