CHAYAN.LOG

리액트. 웹과 네이티브 사용자 인터페이스를 위한 라이브러리위 문구는 리액트의 공식 웹사이트를 방문하면 가장 먼저 마주칠 수 있는 리액트를 설명하는 한 줄의 문장이다.그렇기에 이 문장에서 선택된 단어가 가지는 의미는 크고 리액트를 이해하는 데 있어 한번 생각해볼만한 주제이다. 그만큼 라이브러리는 리액트에서 강조되는 키워드인 만큼 이 부분에 대해 간단히 정리해보려 한다.  프론트엔드 개발자로서 면접준비 좀 해봤다 하면 자주 마주치는 기본적인 질문 중 하나가"리액트는 라이브러리인가요? 프레임워크인가요? 그 둘의 차이를 아시나요?"라는 것이다.이 질문은 리액트의 역할에 대해 그만큼 많은 사람들이 혼란을 겪기 때문에 나왔다고 본다. 라이브러리와 프레임워크를 구분하는 가장 중요한 특징은 제어 흐름에 대한 주도권이 ..

영상(React VAC pattern - View 로직과 JSX의 의존성을 최소화 하자)의 내용을 기본으로 담았습니다. 리액트 VAC 패턴 프론트엔드 개발자와 UI 개발자가 있고 UI 개발자가 직접 html과 JSX를 작성하는 경우, 프론트엔드 개발자와 개발 영역이 겹쳐 conflict가 종종 일어난다. 이런 문제를 해결하기 위해서 VAC 패턴을 제안한다. VAC 패턴은 View Asset Component의 줄인말로, 쉽게 말해 View 로직과 JSX 를 분리해서 관리하는 패턴이다. 이렇게 분리된 JSX는 props를 통해서만 제어되고, 스스로의 상태를 관리하지 않는 stateleess 컴포넌트이다. 이는 즉 반복, 조건부 노출, 스타일 제어와 같은 렌더링에 관련된 처리만을 수행하는것을 의미한다. VA..

children prop이란 무엇인가요? 커스텀 컴포넌트 태그 사이에 삽입되는 태그들을 해당 커스텀 컴포넌트 태그에서 children이라는 prop으로 받아서 사용할 수 있습니다. 만약 이를 타입스크립트와 같이 사용한다면 React.ReactNode 라는 타입으로 선언해 사용하면 됩니다. function App() { return ( This is Title Hello World! ) } // === function CustomTag({children}) { // children에서 위 기준 h1, p 태그를 담고 있습니다. return (...) } 클래스 컴포넌트의 super constructor가 존재하는 이유가 무엇일까요? super는 부모 클래스 생성자를 참조한다는 것을 의미하기에 자바스크립트 ..

목차 리액트 면접 대비용으로 QnA 형태로 주요 개념을 나열한 글입니다. React란 무엇일까요? 리액트는 페이스북이 만든 자바스크립트 라이브러리입니다. 주로, 사용자 View 영역을 만들기 위해 사용됩니다. 리액트는 라이브러리인가 프레임워크인가? 우선, 라이브러리와 프레임워크의 주요 차이점은 앱의 흐름 제어권을 누가 가지고 있는지에 따라 나누어집니다. 라이브러리는 내가 주도성을 가지고 가져와 호출해 사용하는 개념이고, 프레임워크는 자체적으로 주도성을 가지고 있고, 내가 거기에 들어가서 사용하고 호출하는 개념입니다. 리액트는 UI 렌더링에만 관심을 가지고 있고 그 외 동작 (라우터, 상태 관리, 빌드, 테스트 등)들을 수행하기 위해서 다른 기술 스택들을 사용해야 한다는 관점에서 보면 리액트도 결국 뷰 관..