리액트 기초 (23) 썸네일형 리스트형 리액트 8강 props : propertise의 준말, 컴포넌트에 어떤 값을 전달할때 사용하는 것 코드 중간에 중괄호가 있으면 자바스크립트 표현식이 들어간 것 컴포넌트에 어떤 값을 전달하려면 반드시 어떤 어트리뷰트에 값을 넣어주고, props를 이용해서그 어트리뷰트를 받을 수 있음 //app.js import React from 'react'; import Hello from './Hello'; function App() { return ( //hello컴포넌트에 name이라는 어트리뷰트를 넣고 React라는 값을 할당 ); } export default App; //Hello.js import React from 'react'; function Hello(props) { return Hello, {props.nam.. 리액트 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으로 구현가능해져서 함수형 사용 functio.. 리액트 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을 치면 아래 것들도 .. 리액트 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 2 3 다음
