일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 알고리즘
- CSS
- 프로그래머스
- 몽고DB
- 백준알고리즘
- 리액트
- 백준
- 백준골드
- dp알고리즘
- 안드로이드 스튜디오
- 리액트커뮤니티
- JS
- 다이나믹프로그래밍
- js코테
- 백준구현
- 포이마웹
- 프로그래머스JS
- 코딩테스트
- HTML5
- JS프로그래머스
- HTML
- css기초
- 리액트댓글기능
- 코테
- 자바스크립트
- 백준nodejs
- 프로그래머스코테
- 백준구현문제
- 백준js
- 익스프레스
- Today
- Total
목록React (63)
개발새발 로그
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/duRlNQ/btsBQndb7AF/KWqiRta2Buv3u79GHURKh1/img.png)
useState 상태 컴포넌트의 상태를 간단하게 생성하고 업데이트 할 수 있게 해준다. const [state, setState] = useState(initialState); setState를 사용해서 state을 변경하면 다시 렌더링하게 된다. 그래서 컴포넌트 안의 함수와 변수가 다시 호출된다. 1. 초기값을 저장할 때 주의할 점! 그럼 만약 useState로 만든 state값의 초기 값에 무거운 작업을 해서 값을 저장하게 된다면 컴포넌트가 계속해서 렌더링될 때 성능에 굉장히 안좋을 수 있다. 아래 예를 보자 const heavyWokr =()=>{ console.log("엄청 무거운 작업!!!") retrun ['홍길동','김민수'] } const App=()=>{ const [names,setNa..
useEffect 마운트 되었을 때 업데이트 되었을 때 언마운트 되었을 때 와 같은 상황에 특정 작업을 실행하고 싶을 때 사용한다! useEffect는 두 가지 형태로 작성한다. useEffect(setup, dependencies?) 첫 번째로 useEffect의 인자로 콜백함수만 작성했을 때, 두 번째로 useEffect의 인자로 콜백함수와 의존성 배열을 받았을 때 이다. 콜백함수란? 함수의 파라미터로 들어가는 함수 용도는 보통 순차적으로 실행하고 싶을 때 쓴다. 쓰는 이유는 함수를 커스텀할 수 있다. - 파라미터로 받아온 함수에 따라 콜백함수만 작성했을 때에는 렌더링 될 때마다 콜백함수가 실행이 된다. 콜백함수와 의존성 배열을 작성했을 때에는 첫 렌더링 되었을 때와 value값이 바뀔때 실행된다. ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/RvpQR/btsBudCj8L1/yk83pbK2LyIJtMfaPlGsj1/img.png)
React에서의 분기와 반복 컴포넌트는 JSX를 반환하는 함수다. 함수 내 JSX를 처리하는 과정에서 분기와 반복을 사용할 수 있다. JSX 내에서 if와 for와 같은 문법 사용이 어렵기 때문에 편의를 위해서 표현식인 삼항연산자와 map, filter 등을 사용합니다. 분기 사용 예) 논리곱 연산자 사용 삼항연산자로도 가능하다 jsx내에서는 표현식만 사용할 수 있다. 반복 사용 예) - 반복을 사용할 때는 key를 지정해줘야한다. - key는 루프안의 요소와 매칭시켜주는 역할을 한다. - 만약 해당 li 가 재사용 될 때 리소스 비용을 줄여준다. - 내부적으로 성능최적화, 데이터를 변경됐을 때 최적화시켜서 렌더링해준다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/5f21W/btsvkbxQ0Nt/3LCmoGe4pyPB1IHeAXRtG1/img.png)
만약에 아래와 같이 코드가 형성되어있을 때 import { useState } from "react"; 부분을 지워버리면 어떻게 될까? -원래는 useState를 사용하는 코드에 오류가 생겨야하는데 아래와 같이 보이지 않는 상황이 생긴다. 이는 ESlint를 설정해주지 않아서 생기는 현상이다. 원래 주로 React앱을 사용할 때는 자바스크립트가 아닌 타입스크립트를 사용하기 때문에 이런부분에 ESlint를 설정안해줘도 오류를 잡아주지만 현재 자바스크립트인 상황이기 때문에 ESlint를 설정해주면 좋다. ESlint 설정 방법 1. 모듈 설치 npm install -D vite-plugin-eslint eslint eslint-config-react-app [참고] npm install -D ... => [..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/eoOXuL/btsvjd3UGrc/mabwM4kx9tMKIMrSXXAIk0/img.png)
Vite를 이용해서 React를 설치하고 App.jsx파일에 들어갔는데 아래와 같은 오류가 떴다. 이 오류는target="_blank" 에서 생기는 오류이다. 이 코드를 사용하려면 꼭 같이 써야하는 코드가 있다 바로 rel="noreferrer" 이다. (다른 속성도 가능하다.) 이 속성은 아래 링크에서 자세히알아보자 https://3rabbitz.com/blog_ko/08d34c69855fbcad 쓰리래빗츠 블로그 3rabbitz.com https://dirask.com/posts/HTML-open-link-in-new-tab-j4Z4dD HTML - open link in new tab In this article, we would like to show you how in a safe way cre..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ci6XCn/btsvnemNqoD/RPZKiCGOSEa5kjHcZpKVJK/img.png)
리액트를 사용할 때 아래와 같이 React를 import해오면 오류가 뜨게된다. eslint에서 오류를 보여주는 것인데 jsx로 처리되는 변수들은 shadowing이 되서 eslint가 못찾아 낸다고 한다. 해결방법 1. 주석처리로 하는 방법 에러나는 줄 옆에 다음과 같은 주석을 단다. // eslint-disable-line no-unused-vars 나는 이 방법을 일일이 적기에는 너무 귀찮다고 생각했다. 2. eslintrc.cjs 파일에 아래와 같은 코드 추가 나는 현재 vite를 이용해서 react를 설치해서 eslintrc.cjs에 아래 코드를 추가했다. 처음에 구글링했을 때 ./eslintrc에 해라 .eslintrc.json 에 해라. 등등 각각의 방법이 있었지만 다 다른 것 같다. 나는 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bMfSuM/btsswgADbez/K0USsLb4GnqRw46cPJLAg0/img.png)
NextJS환경 구성을 한 후 yarn으로 실행시킬려고했더니 위와 같은 오류가 발생했다. 해결방법은 아래 두가지가 있다고 한다. 1. yarn 지우고 다시 설치하기 1-1. yarn 공유 캐시 파일 지우기 yarn cache clean 1-2. yarn 재설치 yarn install 1-3 yarn 재시작 yarn dev 2. yarn 업데이트 후, 다시 시작하기 2-1. yarn 업데이트 하기 yarn update 2-2. yarn으로 시작해보기 yarn start