영부터 구까지 영부터 구까지

함수 선언문 vs 화살표 함수함수 선언문 (Function Declaration)화살표 함수 (Arrow Function)주요 차이점리액트에서의 사용 예시자바스크립트, React에서 함수 선언문과 화살표 함수는 함수를 정의하는 두 가지 주요 방식이다. 둘은 기본적인 문법 차이부터, this 바인딩 방식, 호이스팅 처리까지 여러 면에서 차이를 보인다. 특히, React와 같은 모던 웹 개발에서 두 방식은 각기 다른 상황에서 유용하게 사용된다. 이번 포스팅에서는 함수 선언문과 화살표 함수의 특징을 비교하고,각각의 장단점과 실용적인 실용적인 사용 사례를 살펴보고자 한다. 또한, React에서 두 방식의 차이가 어떻게 컴포넌트 개발에 영향을 미치는지에 대해서도 다루어,개발자들이 보다 효율적으로 함수를 선택하고 ..

리액트 컴포넌트클래스형 컴포넌트와 함수형 컴포넌트이제 함수형 컴포넌트만 쓰세요- 리액트 컴포넌트 리액트 컴포넌트를 작성할 때 클래스형과 함수형의 두 가지 방식으로 작성할 수 있다. 아직까지 두 방식 모두 지원하고 있지만,공식적으로 리액트에서는 더 이상 클래스 컴포넌트 방식을 사용하지 말기를 권장한다. 따라서 되도록 클래스형 컴포넌트를 배우지 않아도 되지만,레거시(Legacy) 유지 보수 차원에서 간단하게 살펴보고자 한다.- 클래스형 컴포넌트와 함수형 컴포넌트 리액트 프로젝트를 초기 생성하면 함수형 컴포넌트 방식으로 코드가 작성되어 있다. 해당 코드를 리액트 방식으로 변경하면 아래와 같이 변경할 수 있다. 나는 TypeScript를 사용하여 앞으로도 .tsx 파일을 작성할 것이고,아래의 예시 코드에 있는 ..

ES6란? Array Destructuring (배열 구조 분해 문법) Object Destructuring (객체 구조 분해 문법) Array & Object Destructuring (배열 & 객체 혼합 구조 분해 문법) [JavaScript] ES6 문법 ES란, ECMAScript의 약자이며, 자바스크립트의 표준, 규격을 나타내는 용어이다. ES 뒤에 붙은 숫자는 version을 의미하고, 현재 사용하는 ES6은 2015년도에 출시되었다. ① Array Destructuring (배열 구조 분해 문법) 1-1. 중첩되지 않은 배열의 경우 var nums = [10, 20, 30]; var num1 = nums[0]; var num2 = nums[1]; var num3 = nums[2]; 중첩되지 ..

JSX 문법이란? 리액트 엘리먼트(React Element)란? 리액트 컴포넌트(React Component)란? - JSX 문법이란? JSX 문법은 자바스크립트(JS)로 HTML과 같은 문법을 사용할 수 있는 편리한 문법이다. JSX 문법에는 여러가지 규칙들이 존재한다. ① 속성명은 카멜 케이스로 작성한다. - 카멜 케이스(camel case)란? var camelCase; 중간 글자들은 대문자로 시작하지만 첫 글자가 소문자인 경우, 낙타 모양과 비슷하다 하여 지어진 이름이다. ② 자바스크립트 예약어와 같은 속성명은 사용 불가하다. 안녕하세요 // 불가 안녕하세요 // 가능 ③ 반드시 하나의 요소로 감싸기 // 1. 부모 태그로 감싸기 function App() { return ( 안녕하세요 ) } /..

글을 작성하기 전에, 저는 html, css만 조금 만져 보고, 전체적으로 만져본 경험이 없습니다. 공부해보기 위해 게시판을 혼자 구현해 봐야겠다는 생각을 했고, 그 발자취를 블로그에 남기려 합니다. 코드를 잘 짜지 못해, 코드가 다소 난잡하고 쓸데없는 코드들이 들어 있을 수 있습니다! 우리가 흔히 말하는 페이지 이동 기능을 구현하는 방법은, 리액트 라우터(react router)를 통해 가능합니다. 라우팅이 무엇인지, 지금부터 알아보겠습니다. [ 라우팅이란? ] 라우팅이란, 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 할 수 있습니다. 리액트에서는 이 라우팅을, 리액트 라우터(react router)를 통해 가능하게 합니다. [ 리액트 라우터 ( React Router ..

Node.js의 설치 방법은 아래의 글에 자세히 적혀 있습니다. https://mpd253.tistory.com/42 [Node.js] Node.js 설치하기 (Window 10) Node.js를 설치해 보도록 하겠습니다. - Node.js란? Node.js는 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼입니다. 작성 언어로는 JavaScript를 활용하며, 논블로킹 I/O와 단일 mpd253.tistory.com 다음은, 우리의 작업 공간인 Visual Studio Code를 설치해야 합니다. Visual Studio Code를 설치하는 방법은 아래의 url에 접속하여 본인의 로컬 환경과 맞게 설치하면 됩니다. https://code.visualstudio.com/download ..