전체 글85 리액트 입문(Props의 개요) props란 컴포넌트 끼리의 정보교환 방식! 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터로, 컴포넌트 간의 정보 교류 방법이다. props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다(단방향). props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다. import React from "react"; // div안에서 { } 를 쓰고 props.motherName을 넣어보세요. function Child(props) { return {props.motherName}; } function Mother() { const name = "홍부인"; return ; } function GrandFather() { return ; } function App() { re.. 2023. 4. 14. 리액트 입문 JSX(JavaScript + XML) HTML을 품은 JS ⇒ JSX JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다. 안녕하세요! 시작이 반이다! 그래서 나온 게 JSX이다. 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있다. const start_half = 안녕하세요! 시작이 반이다! ; # JSX에서 style 주는 법 // 중괄호를 두 번 쓰는 이유? 객체도 자바스크립트니까요! // 이렇게 쓰거나, orange //혹은 .. 2023. 4. 14. 리액트 입문(React Component) React Component란 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다. # 리액트 컴포넌트를 표현하는 두가지 방식 첫째로 함수형 컴포넌트가 있고, 두번째로 클래스형 컴포넌트가 있다. 두 가지 모두 기능상으로는 동일하지만, 공식 홈페이지에서는 함수형 컴포넌트를 사용하기를 권장하고 있다. Component 보는 방법 컴포넌트(함수) 코드를 볼 때는 영역을 나누어서 보면 조금 더 편하다. 컴포넌트 밖에서는 내가 필요한 파일을 import 하거나, 또는 expor.. 2023. 4. 14. 리액트 입문(개발 환경 세팅 및 CRA) CRA란(Create React App) Create React App : Set up a modern web app by running one command. [출처 : 공식문서] 한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법! 1. 폴더 생성 후 오른쪽 클릭으로 폴더에서 터미널 열기 클릭 2. yarn create react-app week-1(프로젝트명) 3. 폴더 내부에 터미널에서 입력한 프로젝트명으로 폴더가 하나 생성돼있는데 vscode로 생성된 폴더를 열어주면 위와 같은 모습을 볼 수 있음. 4. 폴더 우클릭 후 터미널을 열어서 cd week-1(프로젝트명) 실행 후 yarn start 실행하면 live server와 같은 페이지를 열 수 있음 publi.. 2023. 4. 14. 이전 1 ··· 8 9 10 11 12 13 14 ··· 22 다음
