state

Redux 정리 (1) : 기본 파일 구조 및 reducers (rootReducer, initialState, switch문, Store)

본격적인 프로젝트를 처음 만들다가 리덕스에 대한 기초가 부족함을 느껴 이곳저곳에서 배운 내용을 총 정리하려 한다. 기본 파일 구조 다양한 구조를 사용하지만 나는 아래 형식으로 파일 구조를 짰다. | components |-- Layout.js |-- Header.js |-- Footer.js ... | pages |-- Auth.js |-- Home.js |-- Join.js ... | Redux // 이부분! |-- store.js |-- actions |-- |-- itemActions.js |-- |-- userActions.js ... |-- reducers |-- |-- rootReducer.js |-- |-- itemReducer.js |-- |-- userReducer.js ... actio..

React : 클릭한 글의 제목이 모달에 뜨게 만들기 (props, 삼항연산자)

조건 클릭한 글의 제목이 모달에 뜨게 만들기 풀이 function App() { let [title, setTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); let [modal, setModal] = useState(false); let [titleindex, setTitleindex] = useState(0); return ( { title.map(function(a,i){ return ( { title[i] } { modal ? setModal(false) : (setModal(true), setTitleindex(i)) } }>🗨 2월 18일 발행 ); }) } {modal && } ); } f..

React : 좋아요버튼 만들기 (숏서킷평가,삼항연산자)

조건 좋아요 버튼을 누르면 각각의 게시글의 좋아요가 1씩 올라가야 한다. 풀이 function App() { let [title, setTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); let [like, setLike] = useState([0,0,0]); let handlesetLike = (i) => { let copyLike = [...like]; copyLike[i] = copyLike[i] + 1; setLike(copyLike); } return ( { title.map(function(a,i){ return ( { title[i] } handlesetLike(i)}>👍 { like[i]..

React : 동적인 UI 만들기 (현재 상태, 조건문 삼항연산자)

현재 상태 작성하기 // 전부 가능 let [Modal, setModal] = useState(0); let [modal, setModal] = useState('닫힘'); let [modal, setModal] = useState(false); state를 만들고 현재 UI의 상태정보를 저장한다. 현재 모달창의 상태만 표현할 수 있으면 어떤 자료든 상관없다. 삼항연산자 JSX 안에서는 if / else / for 등 문법을 사용할 수 없다. 그러나 중괄호 안에 삼항연산자는 사용할 수 있다. // 조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드 3 > 1 ? console.log('맞음') : console.log('아님') function App (){ let [modal, s..

React : array, object state 변경하는 법 (spread operator, 래핑)

array, object state 변경하는 법 새로고침을 누르면 글 제목이 바뀌는 이벤트 만들기 * 원본 데이터 보존하기 이렇게 해도 작동하지 않는다. function App() { let [title, chgTitle] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); return ( 블로그 { title[0] } 2월 17일 발행 { let copy = title; copy[0] = '전사로 레벨링던전 도는 방법'; chgTitle(copy); } }>새로고침 ); } 이렇게란 let copy = title; 부분이다. 기존 state === 신규 state 검사를 먼저 진행 후에 바꿔주는데, 들어있는 데이..

React : state (만들기, 데이터 담기, 변경하기, onClick)

state 만드는 법 리액트에서는 변수 말고 state를 만들어서 데이터를 저장해 둘 수 있다. function App() { let [postTitle, a] = useState(['쌍검사길드에서 닌자시작퀘 받기', '파판14 초보자 가이드 이벤트 진행안내', '귀여운 구부 꼬마친구를 받아보자']); return ( 블로그 { postTitle[0] } 2월 17일 발행 { postTitle[1] } 1월 25일 발행 { postTitle[2] } 12월 30일 발행 ); } 맨 윗줄에 import { useState } from 'react';를 쓰고 원하는 곳에 useState('보관할 자료')를 쓰면 state에 자료를 잠깐 저장할 수 있다. 저장한 자료를 나중에 쓰고 싶으면 let [a, b] ..