일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
- sever components
- dynamic pages
- RECOIL
- interceptor routes
- unstable_nostore
- client components
- 클로저
- js
- supabase realtime
- revalidatetag
- createbrowserrouter
- revalidatepath
- @tailwind
- iron-session
- 타입스크립트
- @tailwind base
- @tailwind utility
- 자바스크립트
- CSS
- @tailwind components
- render phase
- sever action
- 3진법 뒤집기
- static pages
- server components
- 리액트
- 프로그래머스
- image component
- commit phase
- SSR
- Today
- Total
개발하는 너구리
TIL-22.10.28 본문
Children prop
: 기본적으로 존재하는 prop
<></> 여는태그,닫는태그 형태로 작성 --> 그 안에 작성된 코드가 children prop값에 담긴다
SCSS
- 변수선언 : $변수명: 속성값;
변수 사용 : $변수명
- @import "파일명"; 으로 SCSS파일 연결해 $변수명으로 변수 사용
리액트에서 <form>를 다루는 기본 방법
state를 만들고 target.value 값을 사용해서 값 변경
이때, value prop으로 state값 내려주고, onChange prop으로 핸들러 함수 넘겨줌
+ 폼 값을 객체 하나로 처리하기
- 이벤트 객체의 target.name과 target.value 값을 이용해, 값을 변경 -> 객체형 state 하나만으로도 값 처리 가능
ex) const { name, value } = e.target; //구조분해 할당
name : e.target.name / value : e.target.value
축약형 표기
객체 내 활용할 변수명과 프로퍼티네임이 같다면 하나만 작성하는것 가능
+ 함수에도 적용가능
- 프로퍼티네임으로 사용할 함수명 = value로 사용할 함수명 --> 축약형표기 가능
+ 객체 내부에서 함수를 선언할때
ex) const user = { getFullName: function() {
return ~ }
--> :(콜론) , function 키워드 생략가능
getFullName() { return ~ };
계산된 속성명(computed property name)
const user = { [표현식] : 값 }
-> 표현식을 대괄호로 감싸주면 표현식의 값을 프로퍼티네임으로 사용가능
+ 변수에 담긴값, 함수의 리턴값 도 사용가능
ex) [propertyName] [getJob()]
Hook
ex) useState같은 use 함수
- 비동기 함수
- 비동기 상활에서 이전 state 값 사용해서 새로운 state 값 만들때는 콜백하수를 넘겨주는 습관을 가지자
이유) state의 세터함수는 state를 통째로 바꾼다
예를 들면, const [values, setValues] = useState( {a:1, b:2} );
setValues( {b:3} ); 실행하면 (통째로 바꿈)
결과로 values값이 {a:1, b:3}이 아니라 {b:3}이 된다
--> 그래서 콜백함수를 사용
switch
switch(변수) {
case 'value1': //변수 값과 value1값을 비교해서 일치하면 해당 case 실행
~
break; //함수로 선언하면 return으로
case 'value2:
~
break;
dafault: //변수 값과 일치하는 케이스가 없으면 실행
~
'TIL' 카테고리의 다른 글
리액트 버튼 클릭 시 색상 변경 (0) | 2022.11.19 |
---|---|
TIL-22.10.30 (0) | 2022.10.31 |
TIL-22.10.29 (0) | 2022.10.31 |
TIL-22.10.27 (0) | 2022.10.28 |
TIL - 22.10.26 (0) | 2022.10.27 |