JIE0025

컴포넌트에 값을 전달하고 싶으면 어떻게 해야할까? 컴포넌트에 띄우는 값을 달라지게 해보자. 먼저 리액트 프로젝트를 연다. App.js 파일을 간단하게 Hello 컴포넌트만 띄우는 걸로 바꾸어주었다. 컴포넌트 값 전달 형식 1) app.js의 Hello 컴포넌트 안에 name = "react"를 적어주었다. App.js import React from 'react'; import Hello from './Hello'; import './App.css'; function App() { return ( ); } export default App; 2) Hello 파일에 가서 함수 매개변수 안에 props 를 적어준다. function Hello(props){ } Hello.js 파일을 다음과 같이 수정한다음 ..

1. 태그는 꼭 닫혀야 한다. 2. 두개 이상의 태그는 감싸주어야한다. 어떤 HTML 태그로 감싸고 싶지 않다면 Fragment로 감싸주기 Fragement 란 빈 태그 3. javascript 값을 JSX 내부에서 보여줄 떈, 중괄호로 감싸서 보여주기 const value = "안녕" return 출력 테스트 {value} 4. JSX 내부에서 style을 사용할 떈 객체 형태로 넣어주기 - style에서 background-color 와 같이 -로 연결되는 아이들은 Camel Case인 backgroundColor로 바꾸어 써준다. - 외부 css class를 쓸 떈 class가 아닌 className을 사용한다. const style = { backgroundColor : 'gray' color :..

정의 컴포넌트 : 기능을 단위별로 캡슐화 하는 리액트의 기본 단위 - 사용자가 보는 뷰(View)는 컴포넌트의 조합으로 구성된다. - 자바스크립트 함수 or 클래스 컴포넌트 만드는 방법 1) react application 폴더를 연다. 2) src 안에 컴포넌트 이름을 정하고 js파일을 생성한다. import React from 'react'; //함수로 작성하기 > JSX function Hello(){ return 안녕하세요; } export default Hello; export default Test; 는 Test 컴퍼넌트를 만들어서 내보내겠다는 의미이다. 3) App.js로 돌아와 파일을 수정한다. import React from 'react'; import Hello from './Hello..

직전에 WSL을 사용할 수 있게 환경설정을 했으니 바로 react project를 생성해 보겠다. 1) npm install -g create-react-app 2) create-react-app [name] name 은 폴더 이름이며, react application을 생성한다. 3) 새로 만들어진 폴더로 이동하여 npm start를 입력시 웹서버가 시작된다. cd [name] npm start vscode에서 확인하기 1) 먼저 앱 작업영역을 확인한다. ubuntu를 실행한 다음 ls 를 누르면 작업 폴더가 바로나온다. 나는 절대 경로를 알고 싶어서 cd ../ 로 끝까지 나간 다음 ls로 확인했다. 작업영역은 home/jieun/mi-primera-app 인것이다. 2) f1 > remote-wsl..