이것저것 스터디📚/React - 공식 문서 (52) 썸네일형 리스트형 React 공식문서 - State: A Component's Memory(컴포넌트의 메모리) 컴포넌트는 폼에 입력하면 입력 필드가 업데이트되어야 하고, "구매"를 클릭하면 제품이 장바구니에 담겨야하는 등 현재 입력값, 장바구니와 같은 것들을 "기억"해야하는데, React에서는 이런 종류의 컴포넌트별 메모리를 state라고 부른다. When a regular variable isn't enough(일반 변수로 충분하지 않은 경우) 일반 변수를 사용하게 되면 다음 두가지 이유로 변경 사항이 표시되지 않는다. 1. 지역 변수는 렌더링 간에 유지되지 않는다 : React는 컴포넌트를 두 번째로 렌더링할 때 지역 변수에 대한 변경사항을 고려하지 않고 처음부터 렌더링한다. 2. 지역 변수를 변경해도 렌더링을 발생시키지 않는다 : React는 새로운 데이터로 컴포넌트를 다시 렌더링해야 한다는 것을 인식하.. React 공식문서 - Responding to Events(이벤트에 응답하기) React를 사용하면 JSX에 click, hover, input, focus 등과 같은 상호작용에 반응하여 발생하는 이벤트 핸들러를 추가할 수 있다. Adding event handlers(이벤트 핸들러 추가하기) 이벤트 핸들러를 추가하려면 먼저 함수를 정의하고 적절한 JSX 태그에 prop으로 전달하면 된다. 보통 함수의 이름은 hanlde로 시작하는 이름 뒤에 이벤트 이름이 오도록 한다. 예를들어 handleClick, handleMouseEnter 등이 있다. 이벤트 핸들러를 prop으로 전달할 때에는 함수를 호출하는게 아니라 전달되어야 한다. passing a function (correct) calling a function (incorrect) alert('...')}> Reading pro.. React 공식문서 - Keeping Components Pure(컴포넌트 순수성 유지) 컴포넌트를 엄격하게 순수 함수로만 작성하면 버그와 예측할 수 없는 동작을 피할 수 있고, 컴포넌트를 순수하게 작성하기 위해서는 몇 가지 규칙을 준수해야 한다. Purity: Components as formulas(순수성: 수식으로서의 컴포넌트) React 컴포넌트는 항상 동일한 입력이 주어졌을 때 항상 동일한 JSX를 반환해야 한다. Side Effects: (un)intended consequences(사이드 이펙트: 의도하지 (않은) 결과) 컴포넌트는 오직 JSX만을 반환해야하며, 렌더링 전에 존재했던 객체나 변수를 변경해서는 안된다. 이는 컴포넌트를 순수하지 않게 만들 수 있다. 아래 예제에서 Cup 컴포넌트는 렌더링 시점에 따라 JSX도 다르게 생성된다. let guest = 0; funct.. React 공식문서 - Rendering Lists(목록 렌더링) 데이터 모음에서 유사한 컴포넌트를 여러 개 표시할 때, JavaScript의 배열 메서드를 사용할 수 있다. Rendering data from arrays(배열에서 데이터 렌더링하기) 서로 다른 데이터를 사용해서 동일한 컴포넌트의 여러 인스턴스를 표시할 떄, 해당 데이터를 JavaScript의 객체와 배열에 저정하고 map() 및 filter()와 같은 메서드를 사용해서 컴포넌트 목록을 렌더링할 수 있다. const people = [ 'Creola Katherine Johnson: mathematician', 'Mario José Molina-Pasquel Henríquez: chemist', 'Mohammad Abdus Salam: physicist', 'Percy Lavon Julian: ch.. React 공식문서 - Conditional Rendering(조건부 렌더링) 컴포넌트는 서로 다른 조건에 따라 다른 것을 렌더링 해야하는 경우가 있고, if문, &&, ? : 연산자와 같은 JavaScript 문법을 사용할 수 있다. Conditionally returning JSX(조건부로 반환하는 JSX) JavaScript의 if/else 문을 사용해서 JSX를 조건부로 반환할 수 있다. function Item({ name, isPacked }) { if (isPacked) { return {name} ✔; } return {name}; } export default function PackingList() { return ( Sally Ride's Packing List ); } Conditionally returning nothing with null(null을 사용.. React 공식문서 - Passing Props to a Component React 컴포넌트는 props를 이용해서 서로 통신하고, props는 객체, 배열, 함수를 포함한 모든 JavaScript 값을 전달할 수 있다. Familiar props(친숙한 props) props는 JSX 태그에 전달하는 정보다. ReactDOM은 HTML 표준을 준수하기 때문에, HTML 태그의 경우 전달할 수 있는 props는 미리 정의되어 있다. Passing props to a component(컴포넌트에 props 전달하기) Step 1: Pass props to the child component(자식 컴포넌트에 props 전달하기) 부모 컴포넌트에서 자식 컴포넌트로 props 전달하기 // Avatar 컴포넌트에 person(객체)와 size(숫자)를 props로 전달 expo.. React 공식문서 - JavaScript in JSX with Curly Braces JSX를 사용하면서 마크업 안에 약간의 JavaScript 로직을 추가하거나 동적 프로퍼티를 참조하고 싶을 때는 중괄호를 사용하여 JavaScript를 사용할 수 있다. Passing strings with quotes(따옴표로 문자열 전달하기) JSX에 문자열 속성을 전달하려면, 작은따옴표 또는 큰따옴표로 묶는다. 이때 동적으로 지정하기 위해서는 작은 따옴표 또는 큰따옴표를 중괄호로 대체하여 JavaScript 값을 사용할 수 있다. // 정적인 문자열 전달 export default function Avatar() { return ( ); } // 동적으로 JavaScript 값 전달 export default function Avatar() { const avatar = 'https://i.imgu.. React 공식문서 - Writing Markup with JSX(JSX로 마크업 작성하기) JSX는 JavaScript를 확장한 문법으로, JavaScript 파일 안에 HTML과 유사한 마크업을 작성할 수 있도록 해준다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분 JSX를 사용한다. JSX: Putting markup into JavaScript(JavaScript에 마크업 넣기) 수년동안 웹은 컨텐츠는 HTML로, 디자인은 CSS로, 로직은 JavaScript 작성되어왔고, 각각 분리된 파일에서 관리가 되었다. 하지만 웹이 더욱 인터렉트비해지면서 로직이 컨텐츠를 결정하는 경우가 많아졌고, 이는 React에서 렌더링 로직과 마크업이 같은 위치의 컴포넌트에 함께 있는 이유이다. 각 React 컴포넌트는 JSX 구문 확장자를 사용하여 브라우저에 마크업을 렌더링할 수 있는 JavaScrip.. 이전 1 ··· 3 4 5 6 7 다음