기록하는 개발자

https://mingmeng030.tistory.com/216?category=1025066 컴포넌트 - 3. property Property 상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. property 값은 수정할 수 없다는 특징이 있다. property의 기초 App 컴포넌트는 MyComponent에 속성 형태로 프로퍼티를 전달한다. import mingmeng030.tistory.com 앞선 위 게시물에서 상위 컴포넌트가 하위 컴포넌트에 property를 전달할 수 있음을 설명했다. 만약 하위 컴포넌트에서 전달받은 property를 변경해야 할 때는 어떻게 해야할까? property의 원본을 수정할 수 있는 함수를 하위 컴포넌트에 함께 제공하면 된다. 이러한 함수를 callback ..

react 컴포넌트 선언하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 그렇다면 두 방식의 차이점은 무엇일까? 1. 선언 방식 클래스형 컴포넌트 import React, {Component} from 'react'; class App extends Component { render() { const Hello = 'hello'; return {Hello} } } export default App; 1. class 키워드가 필요하며, Component 상속을 받아야한다. 2. render() 메소드가 반드시 필요하다. 3. 함수형보다 메모리 자원을 더 많이 사용한다. 4. state, lifeCycle 관련 기능(생명주기함수)사용이 가능하다. 5. 함수형보다 메모리 자원을 더 많이 사용한다. 6..

컴포넌트의 개념 기존 웹 구동 방식 정보(Model), 화면(View), 구동(Controller)코드를 분리한 MVC 방식으로 관리되었다. 장점 - 코드를 효율적으로 관리할 수 있다. 단점 - MVC 간 의존성이 높아 재활용이 어렵다(독립성이 떨어져 하나만 수정이 어려움). → 웹사이트 화면의 각 요소가 비슷하고 반복적으로 사용하는 경우가 많은 것에 착안하여 컴포넌트가 탄생한다. react의 웹 구동 방식 MVC의 View를 독립적으로 구성하여 재사용이 용이하다(기존 컴포넌트를 사용해 새로운 컴포넌트를 만들 수 있다). ※컴포넌트의 이름컴포넌트의 이름의 첫 번째는 반드시 대문자로 이루어져야한다. 이는 기존 HTML 마크업과 구분하기 위해서 이다. 기존 HTML 마크업 : , 컴포넌트 : , 컴포넌트의 ..

JSX : JavaScriptXML 자바스크립트에 XML을 추가한 확장형 문법 XML 또한 HTML의 표현법을 확장한 문법이기 때문에 HTML을 다룰 줄 안다면 JSX도 쉽게 체득할 수 있다. 대신 JSX는 HTML이 아니라 마크업 규칙을 따르기 때문에 아래와 같은 차이점이 발생한다. //HTML //JSX - JSX 에서는 element의 시작표시 의 짝이 맞지 않으면 react 엔진이 jsx를 분석할 때 오류가 발생한다. 1. index.js 파일은 npm run start 혹은 yarn start를 통해 리액트 서버를 구동했을 때 가장 먼저 실행되는 파일이다. 2. index.js는 'root'라는 id를 가진 element에 App component를 출력한다. (root라는 id를 가진 elem..