Itsmesunky140 [REACT] Hooks(2) - useEffect useEffect React에서는 컴포넌트가 mount(화면에 나타남), unmount(화면에서 사라짐), 업데이트 될 때마다 실행되는 코드를 작성할 수가 있는데 이를 효율적으로 관리하기 위해 useEffect라는 hook을 제공한다. 예를 들어, 게시물을 보여주는 컴포넌트가 있다고 가정하였을 때 이 컴포넌트가 처음으로 mount될 때 게시물 데이터를 가져와서 화면에 보여주어야 하는데 이 때 useEffect를 사용하면 컴포넌트가 처음으로 mount될 때 게시물 데이터를 가져오는 코드를 실행할 수 있다. 또 다른 예로는, 사용자가 검색어를 입력했을 때 검색 결과를 가져오는 컴포넌트가 있다고 가정하자. 이 때, useEffect를 사용하면 검색어가 변경될 때마다 다른 검색 결과를 가져오는 코드를 실행할 수.. 2023. 3. 9. [REACT] Hooks(1) - useState 훅(Hook) 이란? 함수 컴포넌트에서 상태 관리, 렌더링 제어, 부작용 처리 등의 기능을 제공한다. 알고 있으면 도움이 될 Hook의 종류로는 useState, useEffect, useContext, useReducer 크게 4가지가 있다. 이것들을 모아 Hooks 라고 일컫는다. Hooks의 장점 ㆍ코드의 가독성 향상 : 클래스 컴포넌트에서는 상태와 생명주기 메서드가 함께 작성 되어, 코드가 복잡해지는 경우가 많은데 Hooks 를 사용하면 상태와 관련된 코드, 생명주기 메서드가 분리되어 가독성이 좋아진다. ㆍ 클래스 컴포넌트의 단점 보완 : 클래스 컴포넌트에서는 this 키워드를 사용해야 하기 때문에 this 바인딩과 관련된 문제들이 발생할 수 있는데, Hooks 를 사용하면 이러한 문제를 해결할 .. 2023. 3. 8. [REACT] Map() java에서의 map과 javascript에서의 map은 키와 값을 가진다는 점에서는 비슷하다고 말할 수 있다. 하지만 java-map은 그 자체가 인터페이스이고, javascript-map()은 그 자체가 함수이다. JS - map javascript에서의 map은 반복문과 같은 역할을 한다고 말할 수 있다. // for loop를 활용한 배열값 확인 const numbers = [ 1, 2, 3 ]; for (let i = 0; i { ret.. 2023. 3. 8. [REACT] Component를 생성하는 여러가지 방법 [REACT] Component 지난 포스트에서 생성한 React 프로젝트인데, 여기서 눈 여겨봐야 할 파일이 세가지가 있다. 바로 index.html, index.js, App.js 이다. 1. index.html 우리가 흔히 알고 있는 html의 구조인데 그 중에서 주목해 itsmesunky.tistory.com 링크를 클릭하면 Component에 대한 개념을 이해할 수 있습니다. 이번 포스트에서는 Component를 생성하는 여러 방법에 대해 기술할 예정이다. 1. 기본 function App(){ return( ) } // end of App() export default App; 2. 함수 선언과 동시에 생성 export default function App(){ return ( ); } // .. 2023. 3. 7. [REACT] Component 지난 포스트에서 생성한 React 프로젝트인데, 여기서 눈 여겨봐야 할 파일이 세가지가 있다. 바로 index.html, index.js, App.js 이다. 1. index.html 우리가 흔히 알고 있는 html의 구조인데 그 중에서 주목해야 할 부분은 이다. 2. index.js 7행의 코드를 살펴보면 ReactDOM의 createRoot() 메소드를 살펴보면 태그 id가 root인 요소가 parameter 값으로 잡혀있다. 바로, 위에서 살펴본 index.html의 이 부분이 Argument인 것이다. 그 div태그로 createRoot() 한 결과값을 root라는 변수에 넣고, render()를 실행했다. render()는 화면을 그려주는 메소드라고 보면 되는데 메소드의 parameter 값은 .. 2023. 3. 7. 이전 1 2 3 4 5 6 7 ··· 28 다음
