전체 글 (138) 썸네일형 리스트형 DeepDive - 23장.실행 컨텍스트 23.1 소스코드의 타입 * ECMAScript 사양은 소스코드(ECMAScript code)를 4가지 타입으로 구분하고, 4가지 소스코드는 실행 컨텍스트를 생성한다. - 전역코드 : 전역에 존재하는 소스코드(전역에 정의된 함수, 클래스 등의 내부코드는 포함되지 않음) 전역 변수를 관리하기 위해 전역 코드가 평가되면 최상위 스코프인 전역 스코프를 생성한다. - 함수 코드 : 함수 내부에 존재하는 소스코드(함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않음) 지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체를 관리하기 위해 함수코드가 평가되면 함수 실행 컨텍스트가 생성된다. - eval 코드 : 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 str.. 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.. React 공식문서 - Importing and Exporting Components 컴포넌트의 가장 큰 장점은 재사용성으로 컴포넌트를 조합해 다른 컴포넌트를 만들 수 있다는 점이다. 컴포넌트를 여러 번 중첩하게 되면 다른 파일로 분리해야 하는 시점이 생기는데, 이렇게 분리하면 나중에 파일을 찾기 더 쉽고 재사용하기 편리해진다. The root component file(루트 컴포넌트 파일) CRA(Create React App)에서는 앱 전체가 src/App.js라는 root 컴포넌트에서 실행된다.(설정에 따라 root 컴포넌트가 다른 파일에 위치할 수도 있다.) * Creact React App CRA는 Create React App의 약어로, 초기 설정과 번들링 등의 작업을 자동화하여 React 애플리케이션을 쉽게 생성하기 위한 도구입니다. CRA를 사용하면 개발 환경 구성을 위한.. 이전 1 ··· 13 14 15 16 17 18 다음 목록 더보기