state를 이용하여 input 입력값 가져오기

state와 onChange 함수를 활용해 사용자가 input에 입력 한 값을 바로 가져올 수 있다. react에서는 HTML을 직접 만질 필요가 없다. state를 변경하면 바로 반영되기 때문! function App (){ let [text, setText] = useState(''); return ( { setText(e.target.value) }} /> {text} ) }

2022.11.11

props

props 부모 component의 state를 자식 component에서도 사용하려면 props로 전송해서 써야한다. props 전송은 부모->자식 만 가능하다. props로 부모>자식 state 전송하는 법 1. 부모 component 에서 2. 자식 component function에 props 파라미터 등록 function App(){ let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '리액트 독학']) return ( ) } function Modal(props){ return ( { props.title[0] } ) } 또는 자식 component에서 아래와 같이도 사용 가능하다. function Modal ({title}){ return ( ..

2022.11.11

JSX 안에서 반복문 : map()

map 함수를 이용한 JSX 내 반복문 JSX 내에서는 for문을 사용할 수 없다. map()함수를 이용하여 반복문을 사용할 수 있다. map() 안에 콜백함수에는 파라미터를 2개까지 사용할 수 있는데, 첫번째 파라미터는 해당 array 의 자료, 두번째 파라미터는 해당 array의 index번호다. import './App.css'; import { useState } from 'react'; function App() { let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '리액트 독학']); let [like, setLike] = useState([0,0,0]); return ( Blog { title.map((item, idx)=>{ return( ..

2022.11.11

React 환경에서 동적인 UI 만들기 (삼항 연산자)

동적인 UI 만드는 3 step 1. html CSS로 미리 디자인을 완성한다. 2. UI의 현재 상태를 state로 저장한다. 3. state에 따라 UI가 어떻게 보일지 조건문 등으로 작성한다. function App () { let [modal, setModal] = useState(false); return ( { setModal(!modal) }}>모달창 여닫기 { modal === true ? : null } ) } function Modal () { return ( 나는 모달창 ) } JSX에서 조건문 쓰는 법 JSX 안에서는 if else 문법을 바로 사용할 수 없다. 때문에 삼항연산자를 써야한다. 삼항연산자는 JSX 중괄호 안에서 사용 가능하다. 조건식 ? 조건이 참일 때 : 조건이 거짓..

2022.11.11

Component 생성, 파일분리

복잡한 html을 한 단어로 치환할 수 있는 Component 문법 리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공합니다. component라고 합니다. 이걸 이용하면 함수나 변수를 만들듯이 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 넣을 수 있습니다. function을 이용해서 함수를 하나 만들어주고 return안에 JSX를 작성한다. 원하는 곳에 을 넣어준다. function App (){ return ( ...생략... // Component ) } function Modal () { return ( 제목 날짜 상세내용 ) } Component 만들 때 주의 점 1. Component 작명 시 첫 글자는 대문자로 한다. 2. 로 써도 되고 로 써도 된다. Co..

2022.11.11

Array, Object State 변경하기

복사, 수정, 적용 array나 Object로 된 state를 변경할 때는 기존 state를 copy하여 수정 한 후 setState 해줘야 한다. let [title, setTitle] = useState(['남자코트 추천', '강남 우동맛집', '리액트 독학']); { let copy = [...title]; copy[0] = '여자코트 추천'; setTitle(copy); } }>글 수정 setState(변경할 값) 함수의 동작 특징 기존 state와 변경될 state를 비교 후 다를때에만 state 변경을 해준다. array, object의 특징 JavaScript에서 array와 object가 담겨있는 변수에는 해당 값이 저장되는것이 아니라, 해당값이 저장되어 있는 공간에 화살표만 저장된다. s..

2022.11.11