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..

vscode는 가볍고 다양한 기능과 언어를 지원하는 풍부한 생태계를 보유하고 있기 때문에 개발을 할 때 자주 사용된다. 앞으로 vscode에서 개발을 자주 할것 같아, WSL리눅스용 윈도우 하위 시스템을 설치하고 vscode에서 사용해보고자 한다. 나는 리액트를 좀더 쉽게 VSCode에서 사용하기 위해 WSL을 설치한다. 당연히 VSCode는 설치되어 있어야 한다. 리눅스 설치 1) 윈도우 검색창에 microsoft store를 검색해 실행한다. 2) store에서 ubuntu 를 검색하고 셋중 마음에 드는 것을 설치한다. 나는 Ubuntu 20.04 를 설치하였다. 3) 제어판을 들어가 windows 기능 켜기/끄기 를 클릭한다. 4) Linux용 하위 시스템 체크 5) ubuntu applicatio..