분류 전체보기142 [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. 전위순회, 중위순회, 후위순회 개념 알아보기 ✏️ 목표 트리의 구조를 알아보고 전휘순회, 중위순회, 후위순회 방식의 과정과 원리를 알아볼 것이다. ❓ 트리 📍 트리 구조와 DFS - root node: 가장 상위에 있는 노드 - 트리의 기본 단위: 부모 노드, 왼쪽 자식 노드, 오른쪽 자식 노드 이렇게 세 개가 한 묶음이다. 왼쪽 자식 노드와 오른쪽 자식 노드는 서로 형제(sibling) 관계이다. ex) 2가 부모 노드라 하면 4는 2의 왼쪽 자식 노드, 5는 2의 오른쪽 자식 노드 - level: 루트 노드는 1 level, 아래로 내려갈수록 level이 증가한다. DFS(깊이 우선 탐색)에서는 일반적으로 root node부터 시작하여 왼쪽부터 내려가면서 탐색한다. 그리고 가장 말단 node에 닿아 더 이상 내려가지 못하면 back을 하여 탐색.. 2023. 5. 23. [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 ··· 29 30 31 32 33 34 35 36 다음
