리액트2 React | State(상태) 관리, Props 전달의 기본 개념 State(상태)의 기본 개념 리액트의 내장 훅(Hook)인 useState 를 통해 상태관리가 가능하다. const [state, setState] = useState(초기 상태); 의 형태로 선언한다. 상태가 변할 때마다 해당 컴포넌트는 return을 다시 하며, 이에 따라 리렌더링 된다. 예를 들어 버튼과 상태 변화를 연동하고, 해당 컴포넌트 내부에 console.log() 를 찍어보면, 버튼을 누를 때마다 로그가 계속 출력되는 것을 알 수 있다. 즉, 계속 return 된다는 뜻이다. 이때 Strict mode(React.StrictMode)가 세팅되어 있다면 두번씩 호출될 수 있다. 이는 Strict mode가 컴포넌트를 두번 마운트하고, 언마운트 하는 등 두번씩 렌더링해보면서 잠재적인 문제를 .. 2024. 1. 2. React | 리액트 프로젝트의 기본 실행구조 분석 드디어 리액트 라이브러리를 익힐 때가 왔다! 처음 리액트를 구동시켜보고, 파일을 이리저리 훑어보는데 동작 원리가 궁금해졌다. 그래서 잠깐 리액트의 기본적인 실행구조를 파보는 시간을 가져보았다. 우선 리액트를 설치하면 다음과 같은 디렉토리와 파일들이 생성된다. package.json 파일을 보니, 루트 디렉토리 가서 npm start 해보면 react가 실행될 것 같다. 그렇게 했더니 App.js 파일이 다음과 같이 성공적으로 실행이 됨을 확인할 수 있다. 자바스크립트 파일이 어떻게 와 같이 JS 파일을 로드하는 문장이 보이지 않는다. 그럼 대체 어떻게 App.js의 변화가 index.html에 반영되고 렌더링될 수 있는거란 말인가?? 일단 리액트를 띄운 화면의 개발자 도구>Network 탭을 보면, 보이.. 2024. 1. 2. 이전 1 다음
