리액트 썸네일형 리스트형 [React] 타입 체크을 위한 PropTypes PropTypes는 리액트에서 지원하는 props 타입 체크 방법이다. 리액트 15.5 버전 이전에는 리액트에 포함되어있다가 이후 별도의 패키지로 분리되어 나왔다. PropTypes를 사용해야 하는 이유, 적용 방법에 대해서 알아보자. 린터는 왜 PropTypes를 강제할까? 앞서 말한 것과 같이, PropTypes는 JS로 작성한 리액트 코드에서 타입 체크를 도와주는 라이브러리이다. 나는 PropTypes의 존재 자체를 모르다가, 린터가 에러를 띄워주어서 처음 알게되었다. 린터는 왜 설치방법까지 알려주면서 prop-types를 강제하는걸까? props를 제대로 전달받는 것이 중요한 이유는 함수에서 argument가 제대로 들어가야 하는 것과 맥락이 같다. 만약 개발자의 실수로 컴포넌트가 꼭 필요한 pr.. 더보기 [React] 공식문서로 시작하는 리액트 입문 2편 글이 생각보다 길어져 두 편으로 나누어 작성하게 되었다. 1편에 이어, 리액트는 공식 홈페이지의 '기본 가이드'를 조건부 렌더링 개념부터 이어서 살펴보겠다. 07. 조건부 렌더링 리액트에서는 각 컴포넌트에 원하는 동작을 캡슐화해두고, 조건에 따라 렌더링하게 할 수 있다. A or B 렌더링 애플리케이션의 상태에 따라서 여러 컴포넌트 중 하나만 렌더링할 수 있다. JavaScript의 조건문 활용하거나 JSX 내에서 논리연산자(&&, ?)등을 활용하면 된다. 이 때 조건에 따라 선택된 요소(element)를 저장하기 위해 let으로 선언한 변수를 사용할 수도 있다. 만약 조건식이 너무 복잡해진다면 컴포넌트를 분리해야하는 타이밍이 아닌지 생각해보자. // JavaScript 조건문 활용 function Gr.. 더보기 [React] 공식문서로 시작하는 리액트 입문 1편 우아한테크코스 프론트엔드 과정의 레벨 2는 리액트로 진행된다고 한다. 레벨2를 앞두고 아주 기초적인 개념이라도 훑어보려고 한다. 리액트는 공식 홈페이지에서 제공하는 공식문서가 잘 정리되어있다고 해서 가볍게 문서만 읽고 정리해보자. ( + 리액트의 공식문서는 풍부한 사전지식을 전제로 한 설명이 섞여 있어 친절한 편은 아니라고 한다...! ) 공식 홈페이지를 훑어보니 크게 주요 개념을 단계적으로 설명해주는 '기본 가이드'와 실습 위주로 간단한 게임을 따라 만드는 '실전 튜토리얼'로 구성되어 있었다. 이 글에서는 '기본 가이드'의 개념 위주로 정리하겠다. 01. 왜 리액트일까? 페이스북에서 리액트를 만든 이유 2013년 5월, 페이스북에서 '리액트'를 발표했다. 그리고 같은 해 7월 Facebook Devel.. 더보기 이전 1 다음
