State

목표 Array 형식의 state의 원소를 추가 및 삭제해본다. Array state 추가 삭제 문법 let [글제목,글제목변경] = useState(['나_Hi','다_안녕하세요','가_채로입니다']); let [따봉, 따봉변경] = useState([0,0,0]); let [inputVal,setInputVal] =useState(''); 위와 같이 정의된 state들을 함수들을 통해 변형해보자 1. Array state 추가 - unshift {setInputVal(e.target.value);}}/> { let copy=[...글제목]; copy.unshift(inputVal) 글제목변경(copy); let addLike = [...따봉]; addLike.unshift(0) 따봉변경(addLike..

목표 부모 컴포넌트가 자식 컴포넌트를 호출할 때, 자식 컴포넌트는 부모 컴포넌트에서 정의된 state 사용이 필요할 수 있다. 이 때 props 파라미터를 이용하여 부모 state를 가져와 보자. 부모->자식 state 전송 1. 자식 컴포넌트 호출 시, 호출 태그 내부에 전송할 state 작성 let [글제목,글제목변경] = useState(['나_Hi','다_안녕하세요','가_채로입니다']); { modal==true?:null } 위 코드는 부모 컴포넌트가 Modal이라는 컴포넌트를 호출하고 있는 것이다. 글제목이라는 state를 글제목이라는 이름으로 자식 컴포넌트에 전송하고 있다. 또한 color와 같이 state는 아니지만, 이와 같은 방식으로 자식 컴포넌트에 문자열이나 함수, 수등을 전송할 수..

기존 자바스크립트 방식과 달리 리액트에서는 데이터의 변동이 프론트 단에서 서버와의 통신 없이도 즉각적인 리빌딩 가능하다. 리액트에서 UI 만드는 단계 1. html css로 미리 디자인 완성 1) html function Modal(){ return ( 제목 날짜 상세내용 ) } 2) css .modal{ margin-top:20px; padding:20px; background:#eee; text-align:left; } 2. UI의 현재 상태를 state로 저장 let [modal,setModal] =useState(false); 3. state에 따라 UI 조작 {setModal(!modal)}}>{글제목[2]} 2월 17일 발행 { modal==true?:null } onClick 속성이 작성된 ..

좋아요 버튼 & 갯수 UI 만들기 let [따봉, 따봉변경] = useState(0); state 변수를 위와 같이 정의했을 경우 {글제목[0]} {따봉변경(따봉+1)}}>👍{따봉} 위 태그에 대응되는 출력물을 클릭하면 받은 '따봉'의 갯수를 1씩 증가되도록 작성했다. onClick 속성을 사용하여 함수를 호출시켜야 하는데 ()=>{} 에서 중괄호 안에 함수이름을 작성한다. 함수 이름은 '따봉'의 state 변경용 함수인 '따봉변경'을 사용해야만 한다. array/object state 사용 방법 1) state 변수 선언 let [글제목,글제목변경] = useState(['Hi','안녕하세요','채로입니다']); 2) onClick을 통한 state 변경 함수 작성 및 버튼 생성 {글제목변경(['Hi2..

· State를 사용하는 이유 기존 html에서는 정적 변수를 선언할 떄 var, const, let 을 사용했다. 하지만 위 자료형들로 선언된 변수들은 값이 변해도 실시간으로 html에 적용되지 않았는데 state를 사용하면 변한 값들이 html에 실시간으로 재랜더링이 되어 적용되기 때문에 부드러운 UI 구축이 가능해진다. 1. fuction App() 함수 위에 userState를 import import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { ... } export default App; 2. function App() 메소드 내부에 upState() 선언 let [st..