Chamy's Blog

Portal Slate.js 를 사용하면서 에디터의 기능을 수정할 때 Portal 을 사용해 메뉴를 생성하는 코드를 보게 되었고, Portal이 뭐지? 하는 궁금증이 생겼다. 이 궁금증을 해소하기 위해 찾아간 곳은 리액트 포탈 공식 문서였습니다. 리액트에서는 포탈을 아래와 같이 설명한다. Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다. 처음에는 이게 무슨 뜻인지 이해가 잘 되지 않았는데 Slate.js의 코드와 문서의 예제들을 보면서 이해하게 되었다. 일반적인 부모-자식 컴포넌트 구조 모든 컴포넌트는 독립적으로 존재할 수도 있고, 부모 또는 자식 컴포넌트를 가지고 있을 수도 있다. 여기서 파란색은 부모, 주황색은 파란색 컴포넌트의 자..

Momentum을 만들던 도중 input 태그의 onChange 이벤트 핸들러에서 아래와 같은 에러 메시지를 출력했다. 문제가 컴포넌트의 코드는 아래와 같다. class SearchBar extends React.Component { constructor(props) { super(props); this.state = { inputValue: this.props.inputValue }; console.log(this.state.inputValue); this.handleSubmit = this.handleSubmit.bind(this); this.handleChange = this.handleChange.bind(this); } handleSubmit(event) { event.preventDefault..

합성 (Composition) vs 상속 (Inheritance) React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용해 컴포넌트 간에 코드를 재사용하는 것이 좋습니다. 이번 섹션에서 React를 처음 접한 개발자들이 종종 상속으로 인해 부딪히는 몇 가지 문제점과 합성을 사용해 이를 해결하는 방법을 살펴볼 것이다. 컴포넌트에서 다른 컴포넌트를 담기 Sidebar나 Dialog를 생각해보자. 우리는 이 안에 어떤 자식 엘리먼트가 들어와야할지 모든 것을 예상할 수 없다. 이러한 컴포넌트에는 children prop을 사용해 자식 엘리먼트를 출력에 그대로 전달하는 것이 좋다. 화면에 출력할 내용을 prop으로 받는 것이다. 아래 코드를 보자. function FancyBorder(props)..

State 끌어올리기 종종 동일한 데이터에 대한 변경 사항을 여러 컴포넌트에 반영해야 할 필요가 있습니다. 이럴 때는 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋습니다. 이런 일을 어떻게 할 수 있을지 지금부터 살펴봅시다. 이번 섹션에서는 주어진 온도에서 물의 끓는 여부를 판단하는 온도 계산기를 만들 것이다. 먼저 BoilingVerdict라는 이름의 컴포넌트부터 만들어보자. 이 컴포넌트는 섭씨 온도를 의미하는 celsius prop을 받아서 이 온도가 물이 끓는지 아닌지를 출력한다. function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would ..

폼 제어 컴포넌트 (Controlled Componenet) HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트한다. 여기서 눈치챈 사람들도 많을 것이다. 자신의 state를 관리하면 되므로 클래스형 컴포넌트를 사용해 setState()로 상태를 업데이트 하면 된다. "제어 컴포넌트 (controlled component)"는 React에 의해 값이 제어되는 입력 폼 엘리먼트를 말한다. 아래 코드를 보며 제어 컴포넌트를 알아보자. class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange..

조건부 렌더링 React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들 수 있습니다. 이렇게 하면 애플리케이션의 상태에 따라서 컴포넌트 중 몇 개만을 렌더링 할 수 있습니다. React에서 조건부 렌더링은 JS에서의 조건 처리와 같다. if나 switch 같은 조건 연산자를 사용해 조건에 맞는 컴포넌트를 렌더링 하면 된다. 아래 두 컴포넌트가 있다고 가정해보자. function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up. } 이제 사용자의 로그인 상태에 맞게 위의 두 컴포넌트 중 하나를 보여주는 Greeting 컴포넌트를 만들자. function Greeting(prop..