728x90 블록체인_9기/🩵 React 블록체인_9기/🩵 React 2023. 7. 18. 51강_230718_React(React Hook함수 - useContext, useReducer, useCallback, useMemo) 목차 051 1. useContext 2. useReducer 3. useCallback 4. useMemo useContext react에서 제공해주는 내장 hook 함수이다. 전역 상태 관리를 도와주는 함수이다. Context? Context 사용 시, 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 일반적으로는 데이터를 props에 담아 부모에서 자식으로 전달되지만, context를 사용하면 명시적으로 props를 넘겨주지 않아도 값을 공유할 수 있게된다. 👩🏫 Context를 사용하기 위해 알아두어야 할 개념! createContext(initialValue) context 객체를 생성한다. Provider와 Consumer를 반환한다. 파라미터 in.. 블록체인_9기/🩵 React 2023. 7. 14. 50강_230711_React(styled-components, redux-thunk, weather API로 페이지 생성) 목차 050 1. Styled-components 2. redux-thunk 3. weather API를 이용한 간단한 사이트 제작 Styled-components 대표적인 CSS-in-JS 라이브러리이다. 클래스 명을 겹치지 않도록한다. 스타일에 관련되어서 props로 값을 전달해서 스타일 값을 적용시킬 수 있다. 💡 CSS-in-JS 스타일 정의를 CSS 파일이 아닌, JS로 작성된 컴포넌트에 바로 삽입되는 스타일 기법이다. 기존에 웹 사이트를 개발했을 때는 HTML, JS, CSS를 각자 별도의 파일에서 작업하는 것을 권장하였지만, react, Vue 등의 모던 자바스크립트 라이브러리가 인기를 끌면서 패러다임의 변화가 찾아왔다. 설치 npm i styled-components 기본문법 import .. 블록체인_9기/🩵 React 2023. 7. 10. 49강_230710_React(Redux) 목차 049 1. Redux 2. Redux DevTools 3. Redux를 사용한 간단한 예시 Redux Redux는 리액트에서 사용할 수 있는 JS 상태관리 라이브러리이다. React는 자식 컴포넌트에 props로 전달받은 값을 사용하기 때문에, 자식관계가 아닌 컴포넌트와는 데이터를 직접 공유하는 것이 불가능하다. 따라서, 공유해야할 데이터를 공유받는 자식 컴포넌트들이 사용할 때 공통적인 부모라는 개념인 store를 만드는 것이다. store로 데이터를 공유할 수 있도록 만들어 준 것이다. 리엑트의 데이터 흐름은 단방향이라 이런 단점을 보완하기 위해 만들어졌다. 데이터를 직접 부모에게 전달받는 것이 아닌, 컴포넌트에 직접 값을 요청하고 전달받는 것을 말한다. Action, Dispatch, Stor.. 블록체인_9기/🩵 React 2023. 7. 6. 48강_230706_React(Hook 함수(useNavigate, useLocation, useParams, useSearchParams), 상점 사이트 제작 ) 목차 048 1. Hook 함수 2. 상점 사이트 제작 Hook 함수 💛 useNavigate 페이지를 이동할 때 사용된다. 특정이벤트가 실행됐을 때 동작하도록 하거나 추가적인 로직이 필요한 경우 사용한다. 💛 useLocation 현재 브라우저의 URL 위치 값을 가져오는데 사용한다. 예) http://localhost:5500/main/2/33/test => /main/2/33/test 의 값을 가져온다. 그 외에도 search, hash 등의 값을 가져온다. 💛 useParams URL에 params 값을 접근하는데 사용한다. params 값을 객체 형태로 가져올 수 있다. 예) {id: '2', num: '33', name: 'test '} 💛 useSearchParams URL의 query 값을.. 블록체인_9기/🩵 React 2023. 7. 5. 47강_230705_React(Router, 가위바위보 제작) 목차 047 1. React_useEffect / useState 이용해서 가위바위보 제작 2. React Router React_useEffect / useState 이용해서 가위바위보 제작 제작조건 플레이어는 유저와 컴퓨터이다. 유저의 패는 게임을 하는 사람이 선택할 수 있고, 컴퓨터의 패는 랜덤으로 지정된다. 1. App.js_전체 화면을 그리고 전체 기능을 구현한다. select함수 : 컴퓨터와 유저가 가위바위보의 패를 냈을 때 보여줄 그림을 지정한다. useState setUserSelect : 유저가 선택한 패를 담아준다. setComSelect : 컴퓨터의 선택 값을 담아준다. setResult : 승패 결과를 담는다. userClick함수 : 유저가 패를 클릭하면 해당 패의 값을 setUs.. 블록체인_9기/🩵 React 2023. 7. 4. 46강_230704_React(vscode_snippet, React 라이브러리, Hooks) 목차 046 1. vscode확장 프로그램_ES7+ React/Redux/React-Native snippets 2. React 라이브러리 3. Hooks vscode확장 프로그램_ES7+ React/Redux/React-Native snippets 단축어로 코드를 자동완성 해주는 확장프로그램이다. 아래 단축키정도는 알고 작성을 하면 컴포넌트 형식을 자동완성 ㄱ시켜 편리하게 작업할 수 있다. // rcc -> React 클래스 component 생성 import React, { Component } from 'react' export default class index extends Component { render() { return ( index ) } } // rafc -> 화살표 함수 컴포넌트 작.. 블록체인_9기/🩵 React 2023. 7. 3. 45강_230703_React(babel, WebPack) 목차 045 1. Babel 2. WebPack Babel Babel의 기본적인 개념은 이전 게시물로 정리를 해놓았으니 해당 주소로 들어가서 확인해보도록 하자! 43강_230628_React(React?, Component, Babel, JSX문법, react 생명주기) React ? React는 사용자 인터페이스를 만들기 위한 라이브러리이다. 위의 React에 대한 정의는 공식적으로 정의된 내용이다. react는 페이스북에서 2011년도 쯤 여러 실력좋은 개발자들이 모여서 만든 oo0ojw.tistory.com ES6문법인 import와 export도 이전 게시물로 정리해 놓은 내용이 있으니 해당 주소로 들어가서 확인해보도록 하자! 44강_230629_React(import/export, 조건부 렌더링.. 블록체인_9기/🩵 React 2023. 6. 29. 44강_230629_React(import/export, 조건부 렌더링, React 라이브러리 다운로드, 토글버튼 구현, 댓글등록 구현) 목차 044 1. import / export 2. Class 컴포넌트_토글버튼 제작 3. React 라이브러리 다운로드 4. Class 컴포넌트_댓글 등록 import / export require : NodeJS에서 사용되는 CommonJS 키워드이다. import : ES6에서 새롭게 도입된 키워드이다. 두 키워드 모두 다른 파일의 코드를 불러오는 키워드지만, 다른 문법 구조를 가진다. // require 키워드 const library = require("library") // import 키워드 import library from "library" //--------- export ----------------------------------------------- // node.js에서는 mo.. 블록체인_9기/🩵 React 2023. 6. 28. 43강_230628_React(React?, Component, Babel, JSX문법, react 생명주기) 목차 043 1. React ? 2. 바닐라 자바스크립트로 React 이해하기_State 상태 변경 3. Component 4. JSX와 Babel 5. Class형 컴포넌트_토글버튼 생성 6. React의 LifeCycle (생명주기) 7. Class형 컴포넌트_현재시간 렌더하기 React ? React는 사용자 인터페이스를 만들기 위한 라이브러리이다. 위의 React에 대한 정의는 공식적으로 정의된 내용이다. react는 페이스북에서 2011년도 쯤 여러 실력좋은 개발자들이 모여서 만든 라이브러리이다. react가 프레임워크다, 라이브러리다 얘기가 많은 라이브러리이다. 다른 개발자들은 왜 프레임워크라고 얘기하는 걸까? React 개발을 할 때 편하게 초기 세팅을 설치받아서 사용할 수 있다. 메타에서 .. 이전 1 다음 728x90
