FRONT-END/REACT10 [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. [REACT] REACT 프로젝트 생성 React란? JavaScript 라이브러리 중 하나로서, 사용자 인터페이스(User Interface)를 만들기 위해 사용되는 도구 싱글 페이지 웹 어플리케이션, 모바일 어플리케이션 개발 시에 토대로 사용 React 프로젝트 생성 TO-DO 1. Node.js 다운로드 받기 2. npx 명령어를 이용해서 CRA(Create-React-App) 1. Node.js Node.js란 간단히 말해서 JavaScript 언어를 서버에서도 사용할 수 있도록 만든 프로그램이고 내장 HTTP 서버 라이브러리를 포함하고 있어 Apache 등의 별도 소프트웨어 없이 웹 서버에서 동작이 가능하다. React 프로젝트를 생성하기 위해서는 반드시 필요하다. Node.js Node.js® is a JavaScript runti.. 2023. 3. 7. 이전 1 2 다음
