React study/React JS로 영화 웹 서비스 만들기33 [React] 3-2. setState 알아보기 (2) 📌 setState를 이용하여 counter 구현해보기(지난 시간에 이어서) ⭐ useState 지난 시간에 이어서 modifier(데이터를 제어하는 함수) 함수가 필요한 이유를 알아볼 것이다. App 컴포넌트를 다음과 같이 수정하여 알아보자. . . . . . const App = () => { let [counter, modifier] = React.useState(0); const onClick = () => { counter = counter + 1; console.log(counter); }; return ( Total clicks: {counter} Click me ); }; . . . . . console 창에서 확인해 보면 버튼 클릭 때마다 counter 값이 1씩 증가하면서 결과가 표시되.. 2023. 5. 31. [React] 2-1. setState 알아보기 (1) 📌 setState를 이용하여 counter 구현해보기 지난 시간에 React 컴포넌트인 Container를 ReactDOM에게 root DOM node에 렌더링 하도록 요청하는 함수인 render 함수를 따로 만들어 페이지가 처음 로드될 때와 버튼 클릭 시 작동하게 하여 업데이트된 count가 화면에 렌더링되도록 하였다. 그런데 문제는 데이터가 바뀔 때마다 render 함수를 호출해야 한다는 것이다. 이것이 반복되는 것보다 좀 더 좋은 리렌더링 방식이 존재한다. React.js 어플 내에 데이터를 보관하고 자동으로 리렌더링을 일으킬 수 있는 방법이다. 1. 초기 세팅 우선 컴포넌트명 Container를 App으로 이름을 변경하고 countUp 함수와 render 함수를 모두 삭제하고 시작한다. (Rea.. 2023. 5. 31. [React] 2-0. State 이해하기 React에서의 State 이번 시간에는 React.js 어플에 값이 바뀔 데이터를 담는 법을 알아볼 것이다. 우선, 이전의 코드를 모두 초기화시키고 다음과 같이 기본 세팅만 해 둔다. 📌 State State는 기본적으로 데이터가 저장되는 곳이다. vanilla.js 코드에서 counter를 증가(counter = counter + 1)시키고 그것을 UI에 디스플레이(span.innerText) 하고 있는데 이것을 State로 만들 수 있다. 즉, State를 이용하여 값이 바뀌는 데이터들을 제어할 수 있다. 📌 조금 복잡한 방법으로 counter 구현해보기 1. counter 초깃값 세팅하기 . . . . . let counter = 0; // 주목! const Container = () => { r.. 2023. 5. 31. [React] 1-5. JSX로 카운터 앱 만들기 (2) JSX를 이용하여 버튼 클릭 횟수를 알려주는 앱 만들기 (easier way) 지난 시간에 이어서 진행한다. 📌 이전 코드와 JSX를 이용한 코드 비교 3. Container 생성 이전 코드 . . . . . const container = React.createElement("div", null, [Title, Button]); . . . . . JSX를 이용한 코드 . . . . . const Container = () => { return ( ); } ReactDOM.render(, root); - 변수명은 첫 글자를 대문자로 하여 적어주었다. * 컴포넌트의 첫 글자는 반드시 대문자여야 한다! 만약 소문자라면, React와 JSX에서는 HTML button tag라고 인식하게 된다. - div el.. 2023. 5. 23. 이전 1 ··· 4 5 6 7 8 9 다음
