천천히 차근차근

프로젝트 위치에서 yarn start 명령어로 시작해주자!!!!!

참고 링크 https://velog.io/@jayjay28/VScode-React-emmet-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 [ VScode + React emmet 사용하기 VScode 에디트 편집기를 이용해서 React를 개발하고 있었습니다. emmet에 익숙한 저는... jsx 작성할 때, 단축키가 안먹히는 것이 불편하여, jsx 작성 시, emmet을 활성화 하는 방법에 대해 찾아보게 되었 velog.io ](https://velog.io/@jayjay28/VScode-React-emmet-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0) workspace settings(json) 열기 ctrl + shift + p workspace setti..

클래스형 컴포넌트 import React from "react"; import PropTypes from 'prop-types'; /* 1. 클래스형 컴포넌트의 기본 뼈대 2. React.Component를 상속받는 것. 3. 상속은 '클래스에 다른 클래스의 기능을 추가할 수 있게' 해준다. 4. React.Component에서 제공하는 기능들을 상속받아 사용하기 위함. 5. 클래스형 컴포넌트를 사용하는 것은 state를 사용하기 위함. */ class App extends React.Component { /* 1. render() 함수를 선언하지 않았는데 사용할 수 있는 이유: React.Component를 상속 받았기 때문에. 2. 함수형 컴포넌트는 return 문이 JS..

Food.propTypes = { name: PropTypes.string.isRequired, picture: PropTypes.string.isRequired, rating: PropTypes.number.isRequired }; 위와 같이 입력을 해주면 Food 컴포넌트는 name, picture, rating이라는 props를 전달받는 컴포넌트로 정의된다. 각 props는 string, number의 자료형을 갖게 된다. 정의되지 않은 props명이나 자료형으로 코딩을 하면 프로그램 오류로 실행이 안되진 않지만 경고가 발생하여 개발자가 수정할 수 있도록 도와준다. 프로그램이 커질수록 그 진가를 발휘하게 된다. isRequired 의미 필요하다는 뜻 때에 따라 없어도 된다. 평점의 예로 아직 평점이..

prop-types 설치 npm install prop-types 컴포넌트가 전달받은 props가 정말 내가 원하는 값인지 확인해준다. 예를 들어 내가 test props를 보내야 하는데 practice props를 보낼 수도 있다. 이런 경우 prop-types를 통해 미리 컴포넌트에 반드시 test props가 전달돼야 한다.라고 정의를 할 수 있다. 정의해놓은 test props가 아닌 다른 props가 전달될 경우 오류 메시지를 출력하게 할 수 있다. package.json 'dependencies'에 추가된 prop-types 확인 { "name": "myfirst_movie_app_2021", "version": "0.1.0", "private": true, "dependenci..

리액트에서 map함수를 사용하는 경우의 key props 배열에 map함수를 활용해서 컴포넌트를 출력할 때 사용한다. 배열 길이가 10인 배열에 map함수를 통해서 10개의 컴포넌트가 출력될 경우, 리액트는 이 컴포넌트들이 다른 것들인지 구분하지 못한다. 각각 다른 컴포넌트들임을 알려주기 위해서 컴포넌트 props에 명시적으로 구분을 해주어야 한다. 컴포넌트마다 다른 id를 부여하고, 그 아이디를 key={id} 와 같은 리액트 내부에서 사용되는 특수 props를 사용해 이것들이 다른 컴포넌트임을 알려준다. key props는 내부 사용 특수 props라서 컴포넌트에 직접 전달되지 않는다. key props를 사용하지 않아도 프로그램 자체에서 오류가 발생하지는 않는다. 다만, key props를 입력해서..

장점 배열의 index를 이용하지 않고 변수에 값을 정의할 수 있다. 코드를 줄일 수 있다. import React from 'react'; function Food(props) { console.log(props); return I like {props.fav}; } function App() { return( Hello World ); } export default App; 구조분해할당 // 구조분해할당 방법1. function Food(props){ { fav } = props; return I like {fav}; } // 구조분해할당 방법2. function Food({fav}){ return I like {fav}; } 위의 두가지 방법 중 아무거나 사용해도 된다. 연습 예제 l..

props 간단히 말하자면 컴포넌트에서 컴포넌트로 전달하는 데이터. 컴포넌트의 props를 사용하면 컴포넌트를 효율적으로 재사용할 수 있다. 컴포넌트 매개변수 문자열이 아닌 경우 중괄호{}를 사용한다. import React from 'react'; function Food() { return I like Potato; } function App() { return( Hello World ); } export default App; 컴포넌트의 첫번째 인자로는 props가 전달된다. App컴포넌트에서는 props에 있는 데이터를 객체(Object)로 변환하여 Food 컴포넌트(함수)에 전달. import React from 'react'; function Food(props) ..

설치 목록 node.js npm ( node.js 설치시 함께 설치됨 ) npx 리액트 앱 프로젝트 생성 npx create-react-app ProjectName 예전에는 웹팩, 바벨과 같은 도구를 따로 설치해야 했지만 이제는 프로젝트를 생성하면 자동으로 셋팅이 된다. create-react-app은 리액트 개발을 바로 시작할 수 있도록 프로젝트 구조 작업, 설정 작업 등을 자동으로 진행해 주는 도구이다. 리액트 앱 실행 npm start리액트 앱 종료 Ctrl + c 프로젝트를 실행한 터미널에서 입력. 터미널에서 바로 VSCode로 프로젝트 여는 방법. 프로젝트가 있는 디렉터리로 이동해서 아래 명령어 입력code ProjectName 보일러 플레이트(boiler plate) 개발을 바로 시작할 수 있..