분류 전체보기
-
리액트 주요개념 - React로 사고하기IT/리액트 2022. 1. 16. 23:54
React는 JavaScript로 규모가 크로 빠른 웹 애플리케이션을 만드는 가장 좋은 방법입니다. 이번 글에서는 React로 상품을 검색할 수 있는 데이터 테이블을 만드는 과정을 살펴볼 것입니다. 목업으로 시작하기 애플리케이션을 설계하기 전 디자이너로부터 JSON API와 목업을 받습니다. // JSON API [ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}, {category: "Sporting Goods", price: "$29.99", stocked: false,..
-
리액트 주요개념 - 합성 vs 상속IT/리액트 2022. 1. 16. 20:34
React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋습니다. 컴포넌트에서 다른 컴포넌트를 담기 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 많습니다. 특히 범용적인 박스 역할을 하는 Sidebar 또는 Dialog와 같은 컴포넌트에서 흔히 볼 수 있습니다. 이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식 엘리먼트를 출력하여 그대로 전달하는 것이 좋습니다. function FancyBorder(props) { return ( {props.children} ) } 이러한 방식으로 다른 컴포넌트에서 JSX를 중첩하여 임의의 자식을 전달할 수 있습니다. function WelcomeDialog(..
-
리액트 주요개념 - State 끌어올리기IT/리액트 2022. 1. 16. 19:28
동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 때가 온다면 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋습니다. 예제: 주어진 온도에서 물의 끊는 여부를 추정하는 온도 계산기 BoilingVerdict: 섭씨온도를 의미하는 celsius prop를 받아 물이 끓기에 충분한 온도인지에 대한 여부를 출력 function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would not boil. } Calculator: 온도를 입력할 수 있는 을 렌더링하고 그 값을 this.state.temperature에 저장, 현재 입력값에 대한 BoilingVe..
-
리액트 주요개념 - 폼IT/리액트 2022. 1. 16. 01:32
제어 컴포넌트 (Controlled Component) JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근 할 수 있도록 도와주는 기술 HTML에서 폼 엘리먼트(input, select, textarea, ..)는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. 그러나 React에서는 변경할 수 있는 state가 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. 이때 React state를 신뢰가능한 단일 출처(single source of truth)로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어할 수 있고 이러한 방식으로 React에..
-
리액트 주요개념 - 리스트와 keyIT/리액트 2022. 1. 16. 01:22
여러개의 컴포넌트 렌더링하기 엘리먼트 모음을 만들고 중괄호를 이용해 JSX에 포함시킬 수 있습니다. const numbers = [1,2,3,4,5]; const listItems = numbers.map((number) => {number} ); map() 함수를 사용해 numbers 배열을 반복 실행하면서 각 항목을 엘리먼트로 반환하고 listItem에 저장합니다. function ListAndKey() { return ( {listItems} ) } listItem 배열을 엘리먼트 안에 포함하여 반환합니다. (저는 새로운 .js 파일을 생성하고 index.js 에서 호출하는 방식으로 코드를 작성했습니다.) 기본 리스트 컴포넌트 일반적으로 리스트 렌더링은 컴포넌트 안에서 이루어집니다. 위의 코드를 리..
-
리액트 주요개념 - 조건부 렌더링IT/리액트 2022. 1. 16. 00:31
React에서는 원하는 동작을 캡슐화하는 컴포넌트를 만들고 애플리케이션의 상태에 따라 컴포넌트 중 몇 개만을 렌더링할 수 있습니다. 이때 if나 조건부 연산자와 같은 JavaScript 연산자를 사용합니다. 예를 들어 로그인 상태에 맞게 다른 문구를 보여줘야 한다면 다음과 같이 코드를 작성해야 합니다. //ConditionalRendering.js function UserGreeting(props) { return WelcomeBack!; } function GuestGreeting(props) { return Please sign up; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if(isLoggedIn) { return ; }..
-
리액트 주요개념 - 이벤트 처리하기IT/리액트 2022. 1. 15. 23:22
React 엘리먼트와 Dom 엘리먼트에서 이벤트를 처리하는 방식은 비슷하지만 문법적인 차이가 존재합니다. React DOM 캐멀 케이스(camelCAse) 사용 소문자 사용 JSX를 사용해 함수로 이벤트 핸들러 전달 문자열로 이벤트 헨들러 전달 예) Activate Lasers 예) ({ isToggleOn: !prevState.isToggleOn })); } render() { return ( {this.state.isToggleOn ? 'on' : 'off'} ) } } 위의 constructor에서 바인딩해주지 않는다면 handleClick 메서드에서 this가 undefinde인식됩니다. 이렇게 바인딩하는 것은 JavaScript에서 함수가 작동하는 방식의 일부입니다. 일반적으로 onClick={..