HYEWON JUNG의 개발일지

목표 리덕스 이해하기 새로 알게 된것/ 2023.11.10 - [분류 전체보기] - Redux Redux redux는 상태 관리 라이브러리라고 하는데 redux는 왜 필요한가. 장점이 3가지가 있는데 1. 리덕스를 사용하면State를 공유하고자 할때 부-모 관계가 아니여도 된다 2. 중간에 의미없이 컴포넌트를 거 hyewonjung-coding.tistory.com 2023.11.09 - [React] - component LifeCycle 생명주기 component LifeCycle 생명주기 Mount constructor a. 컴포넌트가 맨 처음 만들어 질 때 호출 b. 생성자 getDerivedStateFromProps a. 부모 컴포넌트로부터 props를 전달 받을 때, state에 값을 일치시키..

redux는 상태 관리 라이브러리라고 하는데 redux는 왜 필요한가. 장점이 3가지가 있는데 1. 리덕스를 사용하면State를 공유하고자 할때 부-모 관계가 아니여도 된다 2. 중간에 의미없이 컴포넌트를 거치지 않아도 된다. 3. 자식 컴포넌트에서 만든 State를 부모 컴포넌트에서도 사용할 수 있게 된다. 4. 중앙 state관리소를 가지고 있다.(접근 및 제어를 할 수있다.) redux 사용 방법 새 프로그램 src폴더 안에 redux란 파일을 만든 뒤 , 그 안에 modules와 config폴더를 만들어준다. config파일 안에 configStore이란 js파일까지 만들어준다. redux : 리덕스 관련 코드를 모두 넣을 것 config: 리덕스 설정 관련 파일 전부 configStore : 중..

Mount constructor a. 컴포넌트가 맨 처음 만들어 질 때 호출 b. 생성자 getDerivedStateFromProps a. 부모 컴포넌트로부터 props를 전달 받을 때, state에 값을 일치시키는 역할 을 하는 메서드 b. 마운트 될 때, 리렌더링 될 때도 호출 render 화면에 그리는 메소드 a. 최초 mount가 준비완료되면 렌더링하는 메서드 b. 컴포넌트를 DOM에 마운트 하기위해 사용 componentDidMount a. 컴포넌트가 브라우저에 표시가 된 다음에 호출되는 메서드 Update(렌더링 후 state값이변경, props가변경, 부모컴포넌트가 변경되었을 때) getDerivedStateFromProps(mount랑 동일) Mount 과정에서도 동일하게 호출되었던 메서드..

useContext (useContext API) context 는 전역적으로 사용되는 어떤것을 말할 때 많이 쓰이는 용어다. 일반적을 데이터를 넘겨줄 때 부모에서 자식컴포넘트로 props를 통해서 데이터를 내려주곤 했는데 이게 너무 많이 되면 props drilling이 일어난다고 했었다. 그래서 데이터를 효율적으로 전달할 수 있도록 useContext를 사용하는 것이다. useContext의 필수 개념 3개를 꼭 기억해야한다. createContext = 객체, context 생성 consumer = context 변화 감지 Provider = context를 하위컴포넌트로 전달 useContext를 사용하기 위해서는 js파일을 하나 만들고 import { createContext } from "re..

const로 상수를 선언해 두고 재할당을 할 때 나오는 오류이다. 간단하게는 let으로 바꿔서 해결할 수 있다. const a = 15 a=10 이렇게 재할당을 할 대 나타나지만 나같은 경우에는 const [count, setCount] = useState(0) const statePlusHandler=()=>{ setCount(count ++) } 에서 오류가 떴다. react를 공부하던중 +1 해야하는 값에는 그냥 다 ++, 증감연산자를 사용했었는데 갑자기 오류가 뜬 것 이다. 증감연산자는 단순 +1 이 아니라 할당연산자를 간략하게 사용하는 것이라고 보면 되는데 할당연산자는 a += 1 === a= a+1 === a++ 이것을 뜻한다. 그러니 위에 코드에선 count = count+1을 해준 것이다...

목표 하루종일 강의만 듣기 /딴길로 새지않기 스탠다드 타임어택더 빨리 많이 하기 //같은 부분에서 또 틀리지 않기 새로 알게 된것/ 개념정리 2023.11.08 - [React] - GlobalStyle, sass, css초기화 GlobalStyle, sass, css초기화 GlobalStyle GlobalStyle은 전역스타일링으로 코드 전체에 공통된css를 적용할 때 쓰인다. 적용 방식은 편하게 파일(컴포넌트)을 새로 생성해준 후 const GlobalStyle = createGlobalStyle` body{ font-family: "Helvetica", hyewonjung-coding.tistory.com 2023.11.08 - [React] - useState, useEffect, useRef u..