일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 코딩테스트
- 오블완
- vercel
- 내일배움캠프
- 스파르타코딩클럽
- array정적메서드
- 초기셋팅
- git
- 프로젝트 셋팅
- 프로그래머스
- js
- useRouter
- React
- vscode
- error
- 코테
- deep dive
- Next
- 소셜 로그인
- 모던자바스크립트
- 구글 로그인
- nextjs
- 코드카타
- 셋팅
- domain
- 자주 까먹는
- 모던 자바스크립트
- CORS
- 티스토리챌린지
- 리터럴
- Today
- Total
목록React (9)
파피루스
useState: 컴포넌트에 state 변수를 추가할 수 있다 (공식 문서)const [state, setState] = useState(initialState); - initialState : 초기 설정값const [age, setAge] = useState(28);console.log(age); // 28setAge(30); console.log(age); // 30 useEffect: 외부 환경과 같은 생명주기를 가질 수 있다 (공식 문서)useEffect( setup, dependencies? ); - setup : Effect의 로직이 포함된 기능입니다. 선택적으로 정리 함수를 반환할 수도 있습니다. - dependencies : 값이 변경될 때마다 setup을 실행합니다. ..
순수 함수 : 외부환경에 의존하거나 변경하지 않는 함수비순수 함수 : 외부 환경에 의존 또는 외부 환경을 변경시키는 함수 같은 내용을 행하더라도, 이렇게 보면 다르다.let a = 1;// 순수 함수const sum (num) { return num + 5;}console.log(sum(a)); // 6// 비순수 함수const sumCopy(){ return a + 5; // 변수 a에 의존적이다.} console.log(sumCopy()); // 6 같은 행위가 일어나도 외부 환경에 대한 의존성을 낮추기 위해 순수함수와 같이 외부 환경에 의존적이지 않게 짜기 위해 함수형 업데이트를 사용한다. setState는 비동기로 동작하기에 setState 라인에 도착했을 때의 인자..
전통적인 개발 방식의 단점 (html, css, Javascript)1. 유지보수의 어려움2. dom 조작의 비효율성 : 브라우저 렌더링 효율이 좋아짐3. 재사용성 부족 React가 불러온 개발 방식의 변경- Multi Page Application -> Single Page Application: html 을 불러오는 시간 단축 - Server Side Rendering -> Client Side Rendering -- 장점 ; DOM apis 에 대하여 Full Access 를 갖고 있다-- 단점 : 검색엔진 최적화(SEO)에 불리하다 React 프로젝트 만들기1. CRA (Create React App)2. Vite3. Gatsby4. NextJs (프레임워크) React 주요 개념1. 가..