React (56) 썸네일형 리스트형 리액트 9강 hello.js에 있는 name을 아무리 바꿔도 app.js에 있는 name은 바뀌지 않음props는 “부모 컴포넌트”에서 “자식 컴포넌트”로 보내주는 값이기에 자식 컴포넌트를 바꿔도 부모 컴포넌트는 바뀌지 않음 함수의 파라미터로 변수를 전달해주는 것이기에 app에 있는 name의 값이 복사alt + shift + f -> 코드정리우리가 만든 컴포넌트로 다른 컴포넌트를 감싸주려면 반드시 감싸는 컴포넌트가 프롭스로 children을 받아온 후 자신의 jsx표현식 안에 넣어줘야 함 import React from 'react';import Hello from './Hello';import Wrapper from './Wrapper';function App() { return ( .. 리액트 8강 props : propertise의 준말, 컴포넌트에 어떤 값을 전달할때 사용하는 것코드 중간에 중괄호가 있으면 자바스크립트 표현식이 들어간 것컴포넌트에 어떤 값을 전달하려면 반드시 어떤 어트리뷰트에 값을 넣어주고, props를 이용해서그 어트리뷰트를 받을 수 있음//app.jsimport React from 'react';import Hello from './Hello';function App() {return ( //hello컴포넌트에 name이라는 어트리뷰트를 넣고 React라는 값을 할당);}export default App;//Hello.jsimport React from 'react';function Hello(props) {return Hello, {props.name} //hello라는 컴.. 리액트 7강 클래스형 컴포넌트반드시 render()함수가 정의되어야 함render함수는 반드시 JSX를 리턴하는 부분을 포함해야 복잡하고 어려움mport React from "react";class App extends React.Component { //React.Component를 상속받는 App이라는 클래스render() {return Hello, React!;}}export default App;함수형 컴포넌트function키워드, 함수이름, 함수 내부에서 JSX를 리턴하는 부분만 있으면 됨클래스형 컴포넌트보다 훨씬 간결하고 직관적최신 react버전에서는 함수형 컴포넌트 사용을 권장 클래스에서만 사용할 수 있던 state를 react-hook으로 구현가능해져서 함수형 사용 function App() {retu.. 리액트 6강 리액트 폴더 구조public : 나중에 배포시에 서버에서 누구나 접근할 수 있는 파일들src : 기본 컴포넌트 및 다른 소스 모듈, 리액트 앱을 구성하는 파일들node_modules : 서드파티 노드 모듈 즉 npm으로 설치한 패키지가 들어감gitignore : 어떤 깃 파일을 추적하고 추적하지 않을지 정해놓은 파일package json : 프로젝트의 메타데이터를 담고 있음README.md : create-react-app으로 만든 앱에 관한 간단한 설명터미널 여는 법 : vs코드에서 터미널-새 터미널 (cmd로 실행되게 해야 함.. 폴더 경로는 C:\Users\yn112\OneDrive\바탕 화면\react\sample-react-app로 해야 함...)터미널을 열었으면 npm start 입력 -> 종.. 리액트 5강 cmd에서 폴더 경로 바꾸기 : cd 경로node.js자바스크립트는 브라우저에서만 동작하는 언어, 자바스크립트를 컴퓨터에서 일반언어처럼 사용할 수 있게 해주는 런타임JVM,인터프리터 같은 매개체 역할node.js를 설치하면 npm,npx도 함께 설치됨npm : 특정 패키지를 설치, 제거, 업데이트하는 도구 -> 실행결과가 컴퓨터에 남음npx : npm레지스터에 있는 최신 버전의 패키지를 사용해 명령어를 실행해줌 -> 실행결과가 컴퓨터에 남지 않을수도리액트 프로젝트 생성하는 법, cmd에 치면 됨(윈도우 + R)C:\Users\yn112\OneDrive\바탕 화면\react>npx create-react-app sample-react-app create-react-app을 치면 아래 것들도 같이 설치됨De.. 리액트 3강 JSX컴포넌트를 편리하게 사용하도록 하는 리액트만의 문법 -> Babel이라는 도구를 통해 JS로 컴파일(자바스크립트란 소리)중괄호 안에 변수명, 함수, 새로운 JSX넣기 모두 가능 JSX엘리먼트html의 img태그와 달리 연 태그가 있으면 닫는 태그도 반드시 있어줘야 함 2개 이상의 태그를 쓸 때는 꼭 다른 태그로 묶어줘야 함react fragment : 아무 내용 없이 단지 다른 태그들을 묶어주는 역할로 사용어트리뷰트(속성을 사용할 때) camelcase사용->class 대신 className으로 사용속성을 사용할 때 큰 따옴표로 감쌈주석자바스크립트 주석 : //jsx주석 : /**/ 리액트 2강 컴포넌트컴포넌트는 요소를 의미함각각의 요소를 만들어 하나의 object를 구성하는 방법으로 리액트는 전체 웹 페이지를 구성함컴포넌트란 props를 입력받아 JSX를 리턴하는 함수클래스형 컴포넌트도 존재하지만 사용하기 복잡하여 잘 사용하지 않음컴포넌트들이 모여 전체 리액트를 구성컴포넌트의 장점(레고 블럭과 유사)재사용성:다른 리액트 모듈에서 언제든지 호출가능가독성:html코드들을 일일히 보는 것보다 보기 편함유지보수하기 편리 리액트 1강 리액트의 탄생이유인터넷 브라우저에서 화면이 나타나는 원리 Client(브라우저)가 Server로 데이터를 요청, Server는 Client(브라우저)로 데이터를 응답해줌데이터의 3가지 요소HTML : 뼈대CSS : 스타일Javascript : 동적인 요소, DOM조작우리가 작성한 html코드는 DOM이라는 노드트리 개채구조로 변환되어 저장된 후 화면에 나타남Javascript가 DOM을 조작했었으나, 점점 웹 페이지가 복잡해지면서 React라는 DOM을 쉽고 직관적이고 체계적으로 조작할 수 있는 Javascript라이브러리가 탄생함 이전 1 ··· 4 5 6 7 다음
