합성 컴포넌트란? 리액트 문서에는 "React는 강력한 합성 모델을 가지고 있으며 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋습니다."라고 합니다. 카카오 FE 기술 블로그에서는 "합성 컴포넌트 패턴은 하나의 컴포넌트를 여러가지 집합체로 분리한 뒤, 분리된 각 컴포넌트를 사용하는 쪽에서 조합해 사용하는 컴포넌트 패턴을 의미합니다."라고 하네요. 저는 합성 컴포넌트를 여러 컴포넌트들을 조합해 만든 컴포넌트로 재사용성을 위한 코드 패턴이라고 이해했습니다... 이번 포스팅은 리액트 문서를 기반으로해서 제 생각을 첨언하는 형식으로 포스팅 해보겠습니다. 컴포넌트에서 다른 컴포넌트를 담기 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올지 미리 예상할 수 없는 경우가 있습니다. 범용적인 ‘박스’..
[React] Context API - useContext
Context란? 리액트에서 두 개 이상의 컴포넌트 간의 데이터를 주고 받기 위해 상위 컴포넌트에서 하위 컴포넌트로 "props"를 전달해줍니다. 마찬가지로 "Context"도 "props"가 아닌 또 다른 방법으로 컴포넌트 간에 값을 전달하는 방법입니다. 즉, 컴포넌트간 값을 공유하는 여러 방법 중 하나인 셈이죠. 왜 Context를 사용하죠? "데이터를 주고 받을 때 props를 사용한다면서요...!? 그럼 왜 Context가 필요하죠? "라는 의문이 들 수도 있습니다. 아래의 이미지를 봅시다. 색이 칠해져 있는 요소는 데이터가 필요한 컴포넌트입니다. 색이 칠해져 있지 않은 요소는 데이터가 필요 없는 컴포넌트입니다. 이미지를 다시 한번 보면 색이 칠해져 있지 않은 컴포넌트는 데이터가 필요하지 않지만 ..
컴포넌트(Component)란 프로그래밍에 있어 재사용이 가능한 각각의 독립적인 모듈을 뜻한다. 프론트엔드에서 UI를 구성할 때 컴포넌트 기반으로 개발하면 마치 레고 블록을 쌓는 것처럼 이미 만들어진 컴포넌트들을 조합하여 화면을 구성할 수 있다. 컴포넌트들은 기능 구현 코드를 캡슐화하므로서 독립적으로 존재한다. 또한 재사용이 필요한 컴포넌트의 기능을 추상화하여 구현하므로서 재사용성에 매우 용이하다. 이러한 독립성과 재사용성으로 재사용을 원하는 어느곳이든 코드 충돌에 대한 걱정 없이 화면 구성이 가능하다는 큰 장점이 있다. 그 외에도 컴포넌트 기반 개발의 장점은 관심사 분리, 응집도 있는 로직 등이 있으며 독립성이 큰 장점 중 하나인 만큼 변경에 대해 엄청 유연해 유지보수 측면에서도 정말 좋다. 현대 대부..
JSX란? JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다. 리액트에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. JSX는 JavaScript가 확장된 문법이지만 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니므로 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다. 이때 이용하는 것이 바로 “Babel”이다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일 후 브라우저가 읽고 화면에 렌더링한다. JSX 사용하기 // 하나의 태그를 return 해주면 된다. function App() { return (Hello World!) } // 혹은 const element = Hello, ..
