IT 공부/React4 리액트 리덕스 실전 사용 (모달편) 리덕스는 애플리케이션 전역상태 관리 라이브러리 모달 창을 띄우는 것, 제거하는 것 등을 리덕스로 관리해보자 리덕스 기본 개념1. state : 애플리케이션 데이터나 UI 상태 저장. => store2. action : 상태를 바꾸기 위해 발생하는 이벤트 => ex) 모달 띄우기, 모달 끄기3. reducer : 액션 처리, 새로운 상태 반환 함수 리덕스는 상태를 한군데에서 관리하고, 그 상태를 다른 곳에서 쉽게 사용할 수 있게 한다 dispatch 란? (시키는 애)액션을 발생시키는 애!. 이거 해줘!! 라고 말하는 애 (시키는 애)dispatch({ type: 'GET_APPLE' })reducer란? (새로운 거 반환 해주는, 행동자)상태를 변경하는 규칙서. 현재 상태와 액션을 받아 새로운 상태를 .. 2024. 12. 11. React 기초, Component react 좋은 이유- SPA (single page application) -> 페이지 전환 부드럽게- component -> html 재사용성 굿- 데이터가 html 재렌더링 자동반영 웹페이지는 html에서 이용해야함. 근데 어떻게 자바스크립트로 가능하냐?App.js - (index.js)-> index.htmlindex.js가 App.js 를 index.html로 바꾸줌Node js 뭐임?1) 컴퓨터에게 자바스크립트로 명령을 내릴 수 있게 하는 도구자바스크립트로 작성한 코드를 컴퓨터가 알아들을수 있게 통역해주는 프로그램*자바스크립트는 웹서핑을 하는데 사용되는 프로그램인 브라우저에서만 동작하는 언어 웹사이트 만들때만 쓸 수 있고 웹사이트 안에서만 동작하는 언어 우리는 JSX 문법으로 코드를 작성. -.. 2024. 11. 30. React에서 JSX사용, state 변경 html이 아닌 JSX 문법 사용 리액트 데이터 바인딩 쉽게 됨서버에서 가져와서 html에 보여주는 방식원래는 let post = document.getElementById. 이런 방식 써야했음리액트에서는 중괄호 사용해서 { post } 변수명으로만 써서 가능. => 코드 간결 변수나 함수로도 html을 동적으로 사용가능 src, id, href, class name 등의 속성을 {} 안에 변수나 함수명을 써서 쓸 수 있음 -> 개편함 변수 저장시1. 변수 2. state변수 대신 쓰는 데이터 저장공간 -> stateusrState() 이용문자, 숫자, object 등 다 넣을 수 있음var [a, b] = [10, 100];// var a = 10, var b= 100// destructuring 문법.. 2024. 11. 21. React 기초, 리액트란 리액트란?UI를 만들기 위한 자바스크립트 라이브러리.자바스크립트로만 화면 개발은 가능해도, 시간도 오래걸리고 복잡함. 리액트 사용하는 이유?리액트 네이티브로 한 코드로 안드로이드랑 ios 개발 가능(여러 운영체제에서 가능한 크로스플랫폼)새로고침 없이 사이트에서 이용 가능 -> 웹 앱 만들때 유용함.1. 모바일앱 발행 쉬움2. 앱처럼 뛰어난 UX3. 개발자 시장성 컴포넌트 : UI를 재사용하기 위한 코드조합 리액트 설치1. nodejs 최신버전 -> 구글에 nodejs 검색(create react app 사용하기 위한 node js)터미널에서 node -v , npm -v 로 잘 설치되었나 확인, 버전확인(npm은 라이브러리 쉽게 설치 가능하게하는 툴)2. editor 다운 -> 비주얼스튜디오 코드 검색.. 2024. 11. 21. 이전 1 다음
