React 기초 썸네일형 리스트형 [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 다음
