728x90 My Wiki (CodesStates)47 (1-3) React 기초 - Component 컴포넌트로 생각하기 리액트를 이용하면, 각자 독립적인 기능을 가지며 UI의 한 부분을 담당하기도 하는 이러한 컴포넌트를 여러 개 만들고 조합하여 애플리케이션을 만들 수 있다. 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다. 이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다. 이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있다. 한 가지 예시를 들어보겠다. 여러분이 유튜브의 개발자라고 상상해 보고, 컴포넌트 단위로 나눠보자. 상단의 헤더, 화면 중앙의 컨텐츠 리스트. 이렇게 나눈 컴포넌트를 앞서와 같이 다시 트리 구조로 표현해 보자. 먼저 근원이 되는 root 컴포넌.. 2021. 8. 14. (1-2) React 기초 - JSX 활용 JSX 활용: JSX 활용법과 꼭 알아야 할 문법에 대해 알아보자. 주요 JSX 문법에 대해서 알아보자. JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주어야 한다. JSX 규칙 React에서 CSS class 속성을 지정하려면 "className"으로 표기해야 한다. 만약 class로 작성하게 된다면 React에서는 이를 html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의해야 한다. JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 한다. 중괄호를 사용하지 않으면 일반 텍스트로 인식한다. React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 한다. 소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식.. 2021. 8. 14. (1-1) React 기초 - JSX JSX: JavaScript 를 확장한 문법 JSX는 JavaScript XML의 줄임말로 문자열도 아니고 HTML도 아니다. React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법이다. 이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있다. JSX는 JavaScript가 확장된 문법이지만 브라우저가 바로 실행할 수 있는 JavaScript 코드가 아니다. 그렇다면 어떻게 해야 할까? 바로 브라우저가 이해할 수 있는 JavaScript 코드로 변환을 해주어야 한다. 이때 이용하는 것이 바로 “Babel”이다. Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일한다. 컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있다. .. 2021. 8. 14. (1-2) DOM으로 HTML 조작하기 CREATE - createElement DOM으로 HTML을 조작하는 방법 중 가장 기초적인 새로운 element를 만드는 방법이다. document.createElement('div') [코드] 새로운 div element 를 만든다. [그림] 크롬 개발자도구의 콘솔 탭에서 새로운 div 엘리먼트를 생성해보자. 자바스크립트에서 어떤 작업의 결과를 담으려면 어떻게 해야 할까? 변수를 선언하고 어떤 작업의 결과를 변수에 할당한다. 여기서는 div element를 변수 tweetDiv 에 할당한다. const tweetDiv = document.createElement('div') [코드] 새롭게 생성한 div element를 변수에 할당한다. 아직 화면에 변화가 없는 게 당연하다. tweetDiv 라는 .. 2021. 8. 5. 이전 1 2 3 4 5 6 7 ··· 12 다음
