HYEWON JUNG의 개발일지

useState 가장 기본적인 react hook 이며 함수형 컴포넌트 내에서 가변상태를 갖게 한다. const [state, setState] = useState(초기값); 이런 기본 형태에서 리렌더링을 하려면 setState를 이용해서 해야하는데 전에 count를했었는데 당시에 사용한 방식은 2023.11.01 - [React] - state , state와 불변성, 전개구문을 이용한 불변성 유지 state , state와 불변성, 전개구문을 이용한 불변성 유지 state를 쓰는 이유 UI를 바꾸기 위해서다, 렌더링을 다시하기 위해서 const [state, setState]= useState('initial Value') 배열 안의 'state'는 초기값을 받을 변수, 'setState'는 변수를 ..

GlobalStyle GlobalStyle은 전역스타일링으로 코드 전체에 공통된css를 적용할 때 쓰인다. 적용 방식은 편하게 파일(컴포넌트)을 새로 생성해준 후 const GlobalStyle = createGlobalStyle` body{ font-family: "Helvetica", "Arial", sans-serif; line-height: 1.5 } `; 컴포넌트와 비슷하지만 ``사이에 body태그 넣고 {} css를 객체안에 적어준다. import 해와서 JSX상단에 넣어주면 된다. import { createGlobalStyle } from "styled-components"; export default GlobalStyle; import GlobalStyle from './GlobalSty..

styled components란 ? 기본의 css는 태그의 인라인으로 하거나, css파일을 따로 만들어서 구현을 했었는데js파일에서 styledcomponent를 이용하는 방법도 있다. styledcomponent는 리액트의 고유 기능은 아니고 package로 다운을 받아야하는데 적용 방법은 1.vscode 확장에서 vscode- styled-components 를 설치해준다. 2. 터미널을 열어서 'yarn add styled-components'를 입력해 설치해준다. 3. package.json에서 styled-components 가 추가된 걸 확인한다 4. js, jsx파일에 import styled from 'styled-components'; 해준다. 이렇게 하면 세팅이 끝난다. styled ..

과제를 하면서 가장 마주친 오류인데 이걸 마주친다면 당신은 화살표함수가 익숙하지 않다는 뜻입니다. 오류의 뜻은 Expected an assignment or function call and instead saw an expression 할당 또는 함수 호출이 예상되었지만 대신 표현식이 표시되었습니다. 이게 무슨 소리냐 간단하게 return이 안되고 있다는 것이다. 화살표함수를 이렇게 쓰고 있다면 다시 공부해야한다. (본인) 틀린 화살표함수 (props)=>{props.backgroundColor} 화살표함수로 만들 때 식이 한줄이라 return을 생략하려면 {}도 같이 생략을 해줘야한다. 반대로도 똑같이 생략을 하려면 return과 {}는 꼭 같이 생략이 되야한다는 점.. 옳은 화살표함수 (props)=..

react 실행 중 마주친 오류 대충 눈으로 읽어봤을 때 './App'이 안 찾아진다는 것 같았다. 내가 건든 것에는 App.jsx를 import하는 게 없었는데 뭐가 문제 일까했다. 암튼 그래서 구글링을 해서 해봤다. 해본 방법 yarn.lock삭제 이유는 모르겠고 해보래서 해봤다. 아무런 변화가 없었다. 그러던 중 App.jsx를 깃에 올리기 직전에 component폴더로 옮기긴 했지만.. 알아서 위치정보 바꾼다고 알림이 떳었던 것이 생각이 났다. index.js와 Apptest.js import정보 수정하기 알아서 위치정보 수정한다더니 여기에 import하고 있었다. App.jsx파일을 component폴더로 옮겼으니 경로에 component가 추가되어있어야 하는데 없었다. 다시 import위치를 ..

유효성 검사를 진행하는데 계속 첫 새로고침후에 바로 추가하기를 누르면 'Cannot read properties of null (reading 'classList')' 이라는 오류가 계속 뜨는 것이다.. 문제의 코드는 ↓↓ const warning = document.querySelector('.warning') const warning2 = document.querySelector('.warning2') const addListBtnEvent = (event) => { event.preventDefault() if ((title === '' || content === '') && (title.length > 15 || content.length > 100)) { warning2.classList.add..