728x90 반응형 js6 [React+JS/리액트] 웹 스터디 8주차 Redux -1여러 컴포넌트가 공유하는 상태 관리를 자바스크립트 상태관리 라이브러리리액트와 사용하기 위해서는 RTK(React Tool Kit) 설치 필요 redux 를 사용하면 props 없이 state를 공유할 수 있게 해준다. 자바스크립트 파일을 하나 만들어서 state 들을 보관하고 모든 컴포넌트들은 자바스크립트 파일 안에 있는 state 들을 직접 꺼내쓸 수 있다. 프로젝트 사이즈가 커져서 컴포넌트가 많아졌을 때 사용하기 좋다. 그래서 요즘은 개발자 구인시에도 redux 같은 라이브러리의 숙련도를 대부분 요구한다고 한다. - redux toolkit 설치 redux 사용을 위해 터미널에서 아래와 같이 입력 redux toolkit 설치시 npm install @reduxjs/toolkit@1.. 2024. 6. 12. [React+JS/리액트] 웹 스터디 6주차 컴포넌트의 Lifecycle 과 useEffect - 1 useEffect() 나 componentDidMount() 같은 함수를 쓰기 위해서는 컴포넌트의 lifecycle 을 알아야 한다. 컴포넌트의 인생을 알아야 컴포넌트 인생 중간에 간섭을 할 수 있기 때문이다. 컴포넌트의 인생은 3가지로 나뉜다.1. 생성 (mount)2. 재렌더링 (update)3. 삭제 (unmount) 컴포넌트의 인생에 간섭을 하려면 'Hook' 이라는 걸 달아야 한다. 훅 안에 실행할 코드를 넣으면 mount / update / unmount 시에 코드를 실행해주는데 Lifecycle hook 이라고 부른다. 옛날 리액트에서 Lifecycle hook 쓰는 법 예전 class 문법으로 컴포넌트를 만들 때, 안에 함수명.. 2024. 6. 3. Promise 객체 Promise 객체비동기 작업을 처리하기 위한 객체비동기 작업이 완료되면 값을 알려줄 것을 '약속'함일단 Promise 를 돌려주고 나중에 작업이 완료되면 결과값을 Promise 에 채워 넣어줌 Promise 객체의 3가지 상태 1. Pending (대기): 초기상태로, 작업이 아직 완료되지 않은 상태2. Fulfilled (이행): 작업이 성공적으로 완료된 상태3. Rejected (거부): 작업을 실패한 상태 Promise 객체의 상태는 상태 전이(Transition) 을 통해 변경된다. then 메소드Promise 객체가 fulfilled 상태가 되었을 때 호출등록한 콜백함수의 반환값으로 다시 Promise 객체를 반환 catch 메소드Promise 객체가 rejected 상태가 되었을 때 호출.. 2024. 5. 27. [React+JS/리액트] 웹 스터디 3주차 자식이 부모의 state 를 가져다 쓰고 싶을 때: props function App (){ let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); return ( )}function Modal(){ return ( { 글제목[0] } 날짜 상세내용 )} 위의 코드를 실행시키면 '글제목' 이라는 변수가 define 되지 않았다는 에러 발생-> 글제목이라는 state 변수는 function App() 에 있지 function Modal() 에 없기 때문 props 를 사용해서 state 전달하기 1. 자식 컴포넌트를 사용하는 곳에 가서 (tip: '작명' 은 보통 state.. 2024. 5. 8. 이전 1 2 다음 728x90 반응형
