개발 일지/React (16) 썸네일형 리스트형 React select 연동 두개의 셀렉트 박스를 연동하려고 하는데 첫번째 셀렉트박스에서 시, 도 를 검색하면 두번째 셀렉트박스에서 상세 지역이 나오는 로직이다. 내가 해결해야할 문제 1. 각 셀렉트에 노출될 리스트들이 오브젝트로 되어 있다. 2. 첫번째 셀렉트 값에 따라 두번째 셀렉트 박스 값이 변경되어야 한다. 3. 검색 버튼 클릭시 첫번째 셀렉트, 두번째 셀렉트 값을 다른 컴포넌트로 전송해 주어야 한다. 1. 각 셀렉트에 들어갈 값들이 오브젝트로 되어 있다. 이걸 써먹으려면 코드 키를 태그의 벨류로 넣고 키값을 셀렉트 박스에 보여줘야한다. 내가 선택한 방식은 const [z1List, setZ1List] = useState([]); useEffect(() => { const arr = []; for (const [key, va.. OPEN API 써보기2 데이터를 받아왔는데 이미지는 어떻게 불러올까 ? 다시 문서 확인 https://developers.themoviedb.org/3/getting-started/images API Docs developers.themoviedb.org /p 뒤 w500은 너비 길이 니까 그 뒤는 path라고 생각하면 된다 그래서 나는 const BASE_URL = "https://image.tmdb.org/t/p/"; export const getImgPath = (path, size = "w500") => `${BASE_URL}${size}${path}`; 함수를 만들어서 이런식으로 인자값을 패스에 넣어주었다. OPEN API 써보기 내가 정말로 구현해보고 싶었던 OPEN API 이거 하면 진짜 나도 이제 개발자에 가까워 지는구나 생각했다.. 오늘 연동 해볼 API는 https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 어떻게 했냐면.. 1.회원가입 2. 마이페이지 -> 설정 -> API -> API 키 요청 3. 키 발급됬으면 문서 확인 내가 봐야할건 MOVIES 중에 nowPlaying 니까 여기 문서를 봐야함 4.https://api.themoviedb.org/3/movie/now_playing?api_key={발급된키값.. Redux Tool Kit 사용법 리덕스(툴킷) 은 porps 없이 편리하게 state 공유가 가능하게 한다. 리덕스 스토어에 state 보관하는 법 초기세팅때 만들어둔 store.js 파일을 열어서 아래와 같이 코드를 짜면 state를 만들 수 있다. import { configureStore, createSlice } from '@reduxjs/toolkit' let user = createSlice({ name : 'user', initialState : {name:'kim'} }) export default configureStore({ reducer: { user : user.reducer } }) 1. 새로운 createSilice 에 state를 만들고 2. configureStore에 리듀서를 등록한다. 저장된 state는.. Redux Tool Kit 초기 세팅 리덕스 툴킷으로 프로젝트를 끝냈으나 정리를 안하면 무조건 까먹을 것이니 정리를 해봐야겠다. (정리를 해도 까먹겠지만..) 일단 리덕스를 쓰는 이유는 1.파일 하나에 state를 몰아 넣어서 상태관리가 편함 2.프롭스 드릴링을 할필요가 없음 리덕스 툴킷은 리덕스의 개선버전이라고 보면 됨 문법이 좀더 쉬워짐(4줄 써야될거 2줄됨) 리덕스 툴킷 설치 하려면 리액트 & 리액트 돔 이 18.1.x 버전 이상이여야함 npm install @reduxjs/toolkit react-redux 리덕스툴킷 세팅은 import { configureStore } from '@reduxjs/toolkit' export default configureStore({ reducer: { } }) store.js 파일을 만들어서 위 .. React Native React Native 리액트로 모바일앱을 만들 수 있는 프레임 워크 리액트로 android, ios 네이티브앱을 동시에 만들 수 있는 크로스플랫폼 React Native 장점 1.하나만 만들면 되니깐 개발 비용이 절감된다. 2.리액트 알고있으면 배우기 쉽다. React Native 세팅하려면 1.Expo Go 쉬운 셋업 및 빠른 초기개발 Native 코드 수정은 불가능 2.React Native CLI 모든 React Native 를 위한 인프라를 직접 설치 Native 코드 직접 수정 가능 3.CRNA CRA 에서 영감을 받고 만든 React Native Boiler Plate로 Expo SDK와 Cli의 특징을 모두 가지고 있음 Android Studio 또는 Xcode 설치 필요 4.ignite .. React useEffect Lifecycle 컴포넌트에는 Lifecycle 이라는 개념이 있다. 컴포넌트는 1.생성-mount 2.재렌더링-update 3.삭제-unmount 과정을 거친다. 이 과정에서 중간중간 코드를 넣어서 각각의 주기에 기능을 넣어줄수있는데 이것을 갈고리(hook)를 건다고 하고 Lifecycle hook 이라고 한다. useEffect 함수형 컴포넌트에서 Lifecycle hook 을 사용할때는 useEffeect 라는 함수를 쓴다. import {useState, useEffect} from 'react'; function Detail(){ useEffect(()=>{ //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨 console.log('안녕') }); return (생략) } useEffec.. React CRA CRA(Creat-react-app)이란? 리액트 프로젝트를 시작하기 위해 필요한 여러 프로그램을 자동으로 설치해주는 도구이다. CRA로 프로젝트 생성 1. node.js 설치 2.윈도우는 git bash 또는 power shell에서 mac os는 터미널에서 아래 코드를 입력 맥들은 터미널을 사용 ls #현재 내가 위치하고 있는 곳이 어디인지 확인 cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어감 yarn create react-app week-1 혹은 npx create-react-app week-1 3. 에디터에서 프로젝트 구동 에디터 실행 후 생성한 프로젝트를 불러온다음 터미널 실행 yarn start 혹은 npm start 4. 완료 브라우저에 위와 같은 창이 뜨면 실행이 잘 된것임 이전 1 2 다음
