728x90 반응형 useEffect2 [React.js] 5주차 - Counter 만들기, useEffect 1. Counter 만들어보기 Viewer 컴포넌트는 count 값을 보여주고 있고, Controller 컴포넌트는 count 값을 증가시킬 수 있는 버튼을 가지고 있다. 두 컴포넌트는 state 변수인 count 를 공유하고 있는데, Viewer 와 Controller 컴포넌트는 병렬적인 관계이기 때문에 props 공유가 불가능하다. 그래서 두 컴포넌트의 부모 컴포넌트인 App 컴포넌트에 state 변수를 두고 자식 컴포넌트인 Viewer, Controller 컴포넌트에 count 변수를 공유해준다. 이렇게 공유되는 state 를 계층 구조의 맨 위로 끌어올려 아래 컴포넌트들이 모두 공유할 수 있도록 만드는 것을 State Lifting 이라고 한다. 리액트에서 데이터는 위에서 아래로 단방향으로 흐르기.. 2024. 11. 4. [React+JS/리액트] 웹 스터디 - state 변경함수 사용할 때 주의점: async 자바스크립트는 일반으로 코드를 작성하면 synchronous 하게 처리된다. 코드를 적은 순서 그대로 위에서부터 아래로 코드가 실행된다는 뜻이다. 그런데 어떤 코드들은 synchronous 하지 않게 실행되는 코드들이 있다. ajax, 이벤트 리스너, setTimeout 이런 함수들을 쓸 때 asynchronous, 즉 비동기적으로 코드가 실행된다. 이런 함수들은 보통 처리시간이 길다. ajax 로 예를 들면 인터넷 상황이 안 좋으면 코드 실행이 오래걸리는 것을 생각하면 된다. 그래서 이런 코드들은 순차적으로 실행되지 않고 완료되면 실행이 된다. 아래 코드를 실행시키면 2 4 가 순서대로 출력되고, 그 다음에 3이 출력된다. 이는 3을 출력하는 코드가 asynchronous 처리를 지원하는 코드이기 .. 2024. 8. 6. 이전 1 다음 728x90 반응형
