Learn/React (12) 썸네일형 리스트형 React State / 이벤트 state와 props의 차이점 -props (“properties”의 줄임말) 와 state는 일반 JavaScript 객체 -props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리 State hook, useState useState 사용법 React에서는 state 를 다루는 방법 중 하나로 useState 라는 특별한 함수를 제공 import { useState } from "react"; const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값); //ex function Example() { // 새로운 state 변수를 count로 선언 const [count, setCount] = use.. React Props props의 특징 - 부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값 - 웹 애플리케이션에서 해당 컴포넌트가 가진 속성에 해당 - props를 함수의 전달인자(arguments)처럼 전달받아 이를 기반으로 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환 ->컴포넌트가 최초 렌더링 될 때 화면에 출력하고자 하는 데이터를 담은 초깃값으로 사용 - 객체 형태 - 함부로 변경될 수 없는 읽기 전용(read-only) 객체 How to use props 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의 props를 이용하여 정의된 값과 속성을 전달 전달받은 props를 렌더링 function Parent() { return ( I'm the parent // --> Child 컴포넌트를 .. React SPA/Router React SPA(Single-page application, SPA) 하나의 HTML 페이지와 애플리케이션 실행에 필요한 JavaScript와 CSS 같은 모든 자산을 로드 페이지 또는 후속 페이지의 상호작용은 서버로부터 새로운 페이지를 불러오지 않으므로 페이지가 다시 로드되지 않는다. -> 한번 페이지 전체를 로딩 후 사용 할 부분만 작동을 하게 한다. 장점과 단점 장점 -전체 페이지를 계속 불러올 필요가 없기 때문에 사용자 interacation에 빠르게 반응 -서버에서 받은 사용하는 부분의 요청 데이터만 넘겨주면 되기 때문에 서버 과부하가 줄어듬 단점 -Javascript 파일이 크기 때문에 첫 화면 로딩이 시간이 걸린다. -검색엔진 최적화 (SEO)에 맞지 않는다. 보통 SEO는 HTML의 자료.. React 시작 React 란? 사용자 인터페이스( user interface : UI)를 만들기 위한 JavaScript 라이브러리 ! 라이브러리란? 소프트웨어의 구성요소 중 한가지로, API를 기반으로 대상환경(플랫폼)에서 바로 실행 될 수 있도록 모듈화된 프로그램 모음 -> ex) node.js에서 npm 모듈 / 웹에서 React.js / C+ 표준템플릿라이브러리 (STL) ! 프레임워크란? 어떠한 목적을 달성하기 위해 복잡하게 얽혀있는 문제를 해결하기 위한 구조며, 소프트웨어 개발에 있어 하나의 뼈대 역할 -> ex) 안드로이드 앱 개발에 사용되는 android / 웹 개발 Angular,Vue.js / Python 서버개발에 Django,Flask ! 라이브러리와 프레임워크의 차이 라이브러리를 사용하는 애플리.. 이전 1 2 다음
