코딩하는 고릴라

🦥 Text 입력값 받아 활용하기 1. input값에 따라 시시각각 값이 업데이트될 state 선언 2. input 태그에 onChange 속성 넣어주기 3. onChange시, 앞에서 선언한 state 값에 변화 주기 - e.target.value : input 태그 내 입력될 값의 value - setTitleInput : 선언된 state인 titleInput의 값을 e.target.value로 변화시켜 준다 4. 등록 버튼 눌렀을 시 작동할 함수 작성하기 - Line 3 : titleInput이 공백인 경우는 게시글 등록을 하지 않기 위한 코드 - Line 4 : 기존 게시글 제목들을 담아놓은 state인 title의 값을 복사 - Line 5 : 복사된 배열에 새로 입력된 게시글 제목 추가 - ..

하위 컴포넌트에 props 전달하기 1) 하위 컴포넌트 요소에 전달할 속성 명시 - Modal 컴포넌트에 title 이라는 이름으로 title state를 전달 - Modal 컴포넌트에 idx 라는 이름으로 modalIdx state를 전달 2) 하위 컴포넌트에서 받아주기 - Modal 컴포넌트에서 props 라는 이름으로 속성 받기 - props 안에 있는 title을 꺼내 사용하기 위해 {props.title} 사용 - props 안에 있는 idx를 꺼내 사용하기 위해 props.idx 사용 3) 작동 예 - 각 Title의 제목을 누르면 화면 중단 아래에 해당 제목을 출력

map 함수를 사용해 줄이기 - 아래 코드를 살펴보면, className이 "list"인 가 여러번 반복됨을 확인할 수 있다. - 위와 같은 코드의 반복을 줄이기 위해 게시글의 제목이 담긴 state인 title와 map함수를 사용할 수 있다. - Line 2 : title state의 각 요소들(Title1, Title2, Title3)을 element라는 이름으로 받아온다. - Line 5 : 기존에 title[0], title[1], title[2]로 하드코딩된 부분을 {element}로 바꿔 title에 담겨져 있던 요소들을 꺼내 해당 위치에 넣어 사용할 수 있다.

1. Component 작성, 사용 3 Step 1) function 작성하기 2) return문에 html 요소 작성 3) or 다른 function의 return문에 포함시키기 2. Component 작성시 유의사항 1) 작명시 일반적으로 영어 대문자 사용 2) return문 안에 html 태그가 평행하게 여러개 들어갈 수 없음 3) function App(){} 외부에서 만들어야 한다. -> function App(){}도 일종의 Component이기 때문 3. Component 사용 시 단점 1) function 안의 변수를 다른 function에서 마음대로 가져다 쓸 수 없다. -> props를 활용해야함 컴포넌트 사용 예 line 7 : Modal 컴포넌트를 출력할지, 말지 결정할 boolea..

1. state 변경 함수 동작 원리 좌측 처럼 let copy = title로 하면 수정이 이루어지지 않는다. state 변경함수는 사용시 [기존 state] === [신규 state]의 검사를 우선적으로 수행 이 값이 true를 반환하게 된다면, state 변경을 하지 않는다. title[0]의 값을 'newTitle'로 바꾼다 하더라도 위 조건에 true를 반환해 변경이 이루어지지 않는데 이는 변수가 배열의 주소를 저장하고 있기 때문이다. copy와 title이 같은 주소를 가리키고 있으므로 항상 같은 값을 가지게 된다. JS의 spread operator(...)을 이용하면 배열의 괄호를 벗겨주는 느낌의 동작을 하게 된다. ...[1,2,3]은 1, 2, 3이 남게 되고, 오른쪽 코드에서의 [....

1. useState 임포트 import { useState } from 'react' 2. state 선언 - title : state를 사용할 때 쓸 변수명 - setTitle : state의 상태를 바꿀 때 사용 - JS의 destructuring 문법을 활용함 - 위 사진처럼 코드가 짜여져 있을 때, destructuring에 의해 a에 1, b에 3이 저장 3. state를 사용하는 이유 - state에 변동사항이 발생하면 html이 자동으로 재 렌더링해 갱신된 값이 화면에 출력 - 자주 변하는 값을 state에 저장하면 용이함 - vue의 ref() 같은 느낌이 있다. 4. state 변경하는 방법 - destructuring으로 꺼낸 state 변경 함수를 사용 5. 버튼 눌렀을 때 함수를 ..