이것저것 스터디📚 (107) 썸네일형 리스트형 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를 사용하면 개발 환경 구성을 위한.. React 공식문서 - Your First Component(첫번째 컴포넌트) Components: UI building blocks(컴포넌트: UI 구성 요소) React를 사용하면 마크업, CSS, JavaScript를 앱의 재사용 가능한 UI 요소인 사용자 정의 "컴포넌트"로 결합할 수 있고, HTML 태그와 마찬가지로 컴포넌트를 작성, 순서 지정 및 중첩하여 전체 페이지를 디자인할 수 있다. 프로젝트가 커질수록 컴포넌트의 재사용은 많은 디자인을 구성할 수 있게 해주고 개발 속도를 빠르게 해준다. Defining a component(컴포넌트 정의하기) 기존의 웹페이지 개발에서는 웹 개발자가 콘텐츠를 마크업한 다음 JavaScript를 뿌려 상호작용을 추가했다면, React 컴포넌트는 마크업으로 뿌릴수 있는 JavaScript 함수다. Step 1: Export the co.. DeepDive - 22장.this 22.1 this 키워드 객체의 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 하고, 이때 메서드는 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. // 재귀적으로 자기 자신이 속한 객체를 참조하는 방법 const circle = { // 프로퍼티 radius: 5; // 메서드 getDiameter() { return 2 * circle.radius; } } console.log(circle.getDiameter()); // 10 // this를 사용하는 방법 const circle = { radius: 5, getDiameter() { return 2 * this.radius; } }; console.log(circle.getDiamete.. DeepDive - 21장.빌트인 객체 21.1 자바스크립트 객체의 분류 * 표준 빌트인 객체(standard build-in objects/native objects/global objects) 표준 빌트인 객체는 ECMAScript 사양에 정의된 객체이다. 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)과 관계없이 언제나 사용할 수 있다. 전역 객체의 프로퍼티로 제공되므로 별도의 선언 없이 전역 변수처럼 언제나 참조할 수 있다. * 호스트 객체(host objects) 호스트 객체는 ECMAScript 사양에 정의되어 있진 않지만 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)에서 추가로 제공하는 객체이다. * 사용자 정의 객체 사용자 정의 객체는 표준 빌트인 객체와 호스트 객체처럼 기본 제공되는 객체가 아닌 사용자가.. 이전 1 ··· 10 11 12 13 14 다음