dmscks3126 님의 블로그

1. 버튼 누르면 유저가 입력한 글을 글목록에 추가쌩자바스트립트 : "버튼누르면 유저가 입력한 글 가져와서 그걸로 html 하나 생성해주세요~"리액트 : "버튼누르면 유저가 입력한 글 가져와서 글제목 state에 넣어주세요"(지금 코드가 글제목.map() 이렇게 코드짠 덕분에 글제목 state 개수에 맞게 html이 생성되고있기 때문)function App (){ let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']); let [입력값, 입력값변경] = useState(''); return ( { 입력값변경(e.target.value) } } /> { let copy = [...글제목]; copy...

태그 사용하기유저의 입력을 받을 수 있는 박스 - inputhtml에서는 다음과 같은 태그들을 이용가능하다다양한 종류의 인풋박스는 구글링하여 검색할 수 있다.  에 뭔가 입력시 코드를 실행하려면유저가 에 뭔가 입력시 코드를 실행해주고 싶을 때가 있는데,onChange 아니면 onInput 이벤트핸들러를 부착하면 된다.(onChange, onInput은 에 유저가 뭔가 입력할 때마다 안에 있는 코드를 실행해준다){ 실행할코드 }}/>  에 입력한 값 가져오는 법e라는 파라미터를 추가해주고 e.target.value 라고 적으면 현재 에 입력된 값을 가져올 수 있다e는 이벤트 객체 이런식으로 부르는데,현재 발생하는 이벤트와 관련한 유용한 기능들을 제공하는 일종의 변수이다. (작명은 e 말고 자유롭게 가능){..

리액트에서 array / object - state 를 수정하고 싶으면독립적인 카피본을 만들어야 한다.[결론][... 기존 state][... 기존 state]* [...] 이 뭘까? ==> spread operatorReact에서 Spread Operator 사용 이유리액트에서 array나 object 형태의 state를 수정할 때는 독립적인 복사본(immutable state)을 만들어야 한다.왜냐하면 리액트는 state가 변경되었을 때만 컴포넌트를 다시 렌더링하기 때문.기존 state를 직접 수정하면 변경을 감지하지 못해 UI가 업데이트되지 않을 수 있다.Spread Operator란?... 문법으로, 다음 두 가지 주요 기능이 있다.1. 배열이나 객체의 괄호를 벗겨서 요소나 속성만 남김consol..

onClick 사용법 (JSX)1. Click이 대문자2. {} 중괄호 사용3. 그냥 코드가 아닌 함수를 넣어야 잘 동작 함수 넣는 방법 (기본) function App(){ function 함수임(){ console.log(1) } return ( 안녕하세요 )} 함수 넣는 방법 (축약)  { 실행할코드 } }>  state 변경하는 법state가 하나 있다면  let [따봉, 따봉변경] = useState(0)  state 변경을 도와주는 함수는 2번째 작명을 사용해서 바꾼다따봉변경(새로운state) 사용 예시 :- 좋아요를 눌렀을 때 따봉이라는 state를 1 증가하려면{ 글제목[0] } { 따봉변경(따봉+1) }}>👍 { 따봉 }    오늘 배운 내용 정리1. 클릭..

state 만드는 방법 1. useState import 하기import { useState } from 'react' 2. useState('보관할 자료') 설정하기useState('보관할 자료') 3. let 변수에 담기 ( destructuring 문법)let [변수명, set변수명] = useState('저장할 자료') * destructuring 문법은 무엇일까? (코딩애플 강의의 설명이 이해가 안가서 GPT 에게 물어보았다)더보기useState(0)은 현재 상태값과 상태 변경 함수를 배열로 반환합니다.[현재 상태값, 상태 변경 함수](0)은 상태의 초기값입니다.즉, count의 시작값은 0으로 설정됩니다.구조 분해를 사용해서 이 배열을 두 변수 count와 setCount로 나눠 쓰는 거예요...