우사미 코딩

https://state-updates.vercel.app/ State Updates state-updates.vercel.app 참고 페이지 1. Array 1) 특정 index에 새로운 데이터 추가하기 2) 배열에서 특정값 제거하기 - filter함수 사용 2. Object Array 1) 특정 object의 value 변경하기 - map함수 사용 2) object에서 key제거하기 (...rest) 3) object에서 key추가하기

1. 앱 컨셉 add a book에서 title을 입력하고 submit 하면 reading list에 추가된다 책 리스트에서 연필을 클릭하면 title을 수정할 수 있고 저장하는 버튼이 나온다 우리는 이 요소들을 저런 이름으로 설정했고 이러한 계층구조를 가진다 전체적인 순서는 아래와 같음 우리는 1번부터 조져보도록 한다 우리는 책을 이렇게 object로 표현할거고 object를 담는 array를 만들거얌 책 정보가 바뀔때 화면을 다시 업데이트 해야겠찌? 그럼 모다? state사용해야한다 그럼 books정보가 필요한 건 누구일까? 모두 다 books정보 알아야한다. 출력해야하니까 그럼 공통 부모인 App이 state로 가지고 있으면 되겠군 title 텍스트 인풋에 책 이름을 적고 submit하면 books..

mapping하고 순서를 적용하려면 key를 설정해주어야한다 key는 유일값이여야 함 1. ImageList.js import ImageShow from "./ImageShow"; import './ImageList.css'; function ImageList({images}){ const renderImages = images.map((image) => { return }); return {renderImages}; } export default ImageList; 여기서 ImageShow 태그에 key를 추가해주었습니당 사진을 가로 최대 6개까지 나오게 하기 위해서 css도 추가함 2. ImageList.css .image-list{ columns: 6 100px; column-gap: 10px; }..

일단 우리의 앱은 위와 같은 계층구조를 가지고 있다 App이라는 Main contoroller (라고 부르겠음; 이게 기억하기 쉬우니께)가 페이지에 보여줄 요소들을 자식으로 가지고 있음. App의 자식으로는 SearchBar, ImageList가 있고 SearchBar, ImageList는 형제간인데 얘네들끼리는 직접적인 소통은 불가함 하지만 자식-부모간에는 props와 callback function으로 소통하는게 가능한거임 그럼 SearchBar에서 text value를 "app"으로 넘겨주고 그럼 그 앱이 api로 이미지를 요청한 다음 응답받아서 ImageList에 이미지 주소들을 넘겨주면 됨 ㅇㅇ 1. SearchBar.js import { useState } from "react"; functi..

Axios는 Ajax같은 자바스크립트 라이브러리임 우리는 axios는 terminal에서 설치하면된다 프로젝트 경로로 들어가서 터미널에서 명령어 입력 npm install axios 설치하면 node_module 폴더에 추가되고 어쩌고저쩌고 warning 메세지가 뜨는데 앱은 실행됨 Unsplash API를 사용할건데 이건 파라미터로 단어 넘기면 이미지를 리턴해주는 라이브러리임 https://unsplash.com/documentation#location https://unsplash.com/documentation#search-photos Unsplash API Documentation | Free HD Photo API | Unsplash Getting started This document desc..

후.. 드디어왔다 css css는 잘 몰라서 좀 길게 씀 1. src에 css파일을 생성한다 css파일은 하나에 다 정의해두어도 되지만 그러면.. 나중에 디버깅.. 네.. 그렇기 때문에 파일을 나누겠습니다 1. App에 스타일주기 1) App.js import './App.css'; import AnimalShow from "./AnimapShow"; import { useState } from "react"; function getRandomAnimal(){ const animals = ['bird','cat','cow','dog','gator', 'horse']; return animals[Math.floor(Math.random() * animals.length)]; } function App(){..

animals 배열에 담겨있는 요소를 배열을 순회하면서 AnimalShow라는 컴포넌트를 만들고 컴포넌트의 type이라는 속성 값으로 배열의 각 요소를, key의 속성 값으로 현재 index를 props로 넘겨주고 싶은데여 그럼 map을 사용하면 됨! * App.js import AnimalShow from "./AnimapShow"; import { useState } from "react"; function getRandomAnimal(){ const animals = ['bird','cat','cow','dog','gator', 'horse']; return animals[Math.floor(Math.random() * animals.length)]; } function App(){ const[an..

위와 같이 아주 심플한 페이지가 이씁니당 add animal 버튼을 클릭하면 아래 숫자가 1씩 업데이트되어 렌더링하도록 할 거예염 그럼 우리가 이때 일반 javascript라면 그냥 변수를 선언하고 값을 업데이트하면 되겠지만 ㄴㄴ 여기서는 그렇지가 않습니다 jsx에서는 state라는걸 사용해야하는거져 빨간 박스처럼 state가 component를 다시 렌더링해서 화면에 보이는 데이터를 업데이트 해준다고 합니다 state를 사용하려면 state를 import 해야겠죠? import { useState } from "react"; App.js 상단에 위 코드를 import 해줍니다 state 사용하는 방법은 const [변수명, setter함수] = useState(초기값) 입니당 setter함수가 변수값을..