본문 바로가기

🌼 리액트 공부18

리액트 네이티브 첫 수업 (실시간 강의) 정리 #1 import { StatusBar } from "expo-status-bar"; // react-native에서 임포트 해와야한다. // react-native에서 쓰는 ui태그들은 받아와야 한다. // import { useState } from "react"; // 외부 url 가져올땐 import { StyleSheet, Text, View, Image, TextInput } from "react-native"; // ScrollView를 쓸때는 contentContainerStyle을 써야된다. // emotion이거 까신거 같음 styled 쓰려고 // import styled from "@emotion/native" // const StyledText = styled.Text `font-siz.. 2022. 12. 29.
[리액트] Carousel (이미지 자동 슬라이드) 기능 구현하기 1. 먼저 react-slick과 slick-carousel을 터미널에 깔아주기 npm install react-slick npm install slick-carousel 2. 작성하는 파일에 아래 두개 임포트 해주기 import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; 3. 이건 내가 이번 프로젝트를 만들면서 기본 프레임을 짜놓은 코드이다 :) import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick-theme.css"; import React, { Component } from "react"; import Slider f.. 2022. 12. 26.
리액트 심화 강의 복습 / redux-toolkit , json-server, thunk , Axios >> 리덕스-툴킷 yarn add react-redux @reduxjs/toolkit 리덕스-툴킷에 slice 있음 (slice는 액션, 액션크리에이터, 리듀서를 동시에 함) // src/redux/modules/counterSlice.js // 액션벨류나 엑션크리에이터를 사용한 부분이 없어졌다(일반 리덕스랑 달리) import { createSlice } from "@reduxjs/toolkit"; const initialState = { number: 0, }; // 리덕스툴킷의 슬라이스 : 액션벨류,엑션크리에이터,리듀서가 합쳐짐 // createSlice라는 api를 통해 만들 수 있다. // createSlice의 인자로는 모듈의 이름, 그 모듈의 초기상태값, 모듈의 리듀서 로직이 인자로 들어감 .. 2022. 12. 23.
[리액트] 리액트 심화 필기노트 1)플러그인 설치하기 2) yarn 에서 styled-components 설치하기 yarn add styled-components 3) 코드 작성 // src/App.js import React from "react"; import styled from "styled-components"; // 1. styled-components를 만들었습니다. // styled 키워드를 사용해서 styled-component방식으로 컴포넌트를 만듦 // 내가 원하면 styled.span 이나 styled.h1 이런식으로 쓸 수 있음 const StBox = styled.div` width: 100px; height: 100px; border: 1px solid ${(props) => props.borderColor}.. 2022. 12. 8.
[리액트] 리액트 입문 강의 정리노트 리액트는 자바스크립트를 이용한 프론트앤드개발을 더 편리하게 해주기 위한 라이브러리다 Virtual DOM을 활용하여 업데이트 해야하는 DOM 요소를 찾아서 해당 부분만 업뎃함 MPA(멀티 페이지 어플리케이션) 아키텍처는 페이지마자 서버에 해당 페이지의 HTML파일을 요청하고, 이를 브라우저가 응답으로 받아 유저가 볼수 있도록 그려주는 구조였다. SPA는 서버에서 HTML페이지들을 일일이 다운로드하는 것이 아니라, 하나의 마크업 HTML 파일을 받아서 클라이언트에서 데이터를 직접 로딩해 동적으로 화면을 표시함 Virtual DOM -> 가상돔이라고 한다. HTML 마크업 구조를 자바스크립트로 조작이 가능한 객체 형태(Object 형태)로 모델링한 것을 DOM이라고 한다. (Document Object Mo.. 2022. 12. 5.
[리액트] 리액트 입문강의 듣는중 / 리액트의 'state'란? >> 리액트 state 매번 코드가 업데이트 될 때마다, ui를 바꿔주는 건 너무 낭비라고 함 ui를 바꾸는 건 굉장히 '비싼' 일이라고 한다. 뭔지도 모르는 변수가 업데이트 될 때마다 매번 ui를 바꾸는 건 굉장히 낭비되는 짓 리액트는 이러한 불필요한 업데이트를 방지하기 위해 'state'라는 개념을 만들었음. 변수와 또 다른 개념의 state를 만드는 것 state가 업데이트 되면, ui를 업데이트 해주겠다는 것! const [count2,setCount2] =useState(0); useState는 함수이다. useState는 무엇을 반환하냐? 배열(Array)을 반환한다. '0'은 초기값임. 이 초기값을 담고있는 state 변수 하나랑 ( count2 ) 이 state값을 바꿀 수 있게(업데이트 .. 2022. 12. 4.