React 썸네일형 리스트형 [React] 조건부 렌더링 패턴 Conditional Rendering Pattern 조건부 렌더링 패턴 Conditional Rendering Pattern 리액트의 조건부 렌더링 문서에서 조건에 따라 랜더링할 컴포넌트를 선택하는 방법을 소개하고 있지만 추가적으로 알아두면 유용한 best practices 패턴이 몇 가지 더 있어서, 하나씩 소개드리도록 하겠습니다. 소개드릴 패턴 목록입니다. if else 패턴 : ? 패턴 && 패턴 switch case 패턴 enum 패턴 HOC 패턴 if else 패턴 리액트 공식 문서에서 소개하는 가장 기본적인 패턴입니다. function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } else { return ; } } if 문 조건에 따라 Us.. [React] 이벤트 이벤트 합성 이벤트 (SyntheticEvent) 브라우저마다 이벤트 이름부터 시작해서 이벤트 종류나 이벤트가 처리되는 방식이 다릅니다. 이를 동일하게 처리하기 위해 React 는 Synthetic 이벤트로 브라우저마다 다른 Native 이벤트를 묶어서 처리합니다. 따라서 React 개발자는 브라우저마다 다른 Native 이벤트를 신경쓰지 않고, React 가 제공하는 이벤트만 신경쓰면 됩니다.f React 이벤트는 합성 이벤트라서, false 를 반환하더라도 이벤트 전파가 멈추지 않습니다. 반드시 e.stopPropagation() 또는 e.preventDefault() 를 호출해야 합니다. 이벤트 등록하기 React JSX 에서 이벤트를 등록할 때 조심해야 하는건 일반적인 HTML에서 이벤트를 등록하.. [React] Lifecycle 이벤트 Lifecycle 이벤트 React 컴포넌트는 Lifecycle 을 가지고 있으며, 발생한 이벤트에 따라 정해진 순서로 특정 메서드들을 실행합니다. 이벤트에 따라 발생하는 함수의 순서를 알고 있어야 어떤 순서에 어떤 코드를 실행시켜야 할지 판단할 수 있고, 실행 결과를 예측할 수 있습니다. 여기서는 React 16.13.0 버전 이후 Lifecycle 만 설명드리도록 하겠습니다. React 팀에서 Async Rendering 을 위해 Lifecycle 설계를 변경하기로 결정하였으며, 17.0 버전 이후로는 componentWillMount 메서드와 componentWillReceiveProps 메서드, 그리고 componentWillUpdate 함수가 지원되지 않습니다. Lifecycle 지도 그림 출처.. [React] Stateful 컴포넌트보다 Stateless 컴포넌트로 작성하자 React에서 컴포넌트(Component) 란? React는 아래와 같이 컴포넌트(Component)를 만들고, 컴포넌트를 조합해서 UI를 구현합니다. class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } Sateful 컴포넌트와 Stateless 컴포넌트 위와 같이 작성하는 React 컴포넌트 중 state 를 사용하는 경우를 Stateful 컴포넌트라 하고, state 를 사용하지 않는 컴포넌트를 Stateless 컴포넌트 라 합니다. 만약 state를 사용하지 않는 Stateless 컴포넌트로 작성할 수 있다면 최대한 state를 사용하지 않도록 컴포넌트를 구현해야 이해하기 쉽습니다. 이해하기 쉬.. 이전 1 다음
꾸준히 노력하는 개발자 "김예건" 입니다.