끄적끄적

클래스형 컴포넌트 컴포넌트에서 state를 설정할 때는 다음과 같이 constructor 메서드를 작성하여 설정해야 합니다. constructor : 컴포넌트의 생성자 메서드 클래스형 컴포넌트에서 생성자 메서드를 장성할 때는 반드시 super(props)를 호출해 주어야 합니다. state : 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 컴포넌트의 state는 객체 형식이어야 합니다. state를 조회할 때는 this.state로 조회합니다. this.setState를 사용하여 state에 새로운 값을 넣을 수 있습니다. 함수형 컴포넌트 useState 함수의 인자에는 상태의 초깃값을 넣어 줍니다. 클래스형 컴포넌트에서 state의 초깃값은 객체 형태로 넣어주어야 했지만 useState에서는 반드시..

porps는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다. 부모 컴포넌트에서 name이라는 props를 MyComponent로 전달 JSX 내부에서 props를 렌더링할 때는 { } 기호로 감싸 주면 됩니다. props 값을 따로 지정하지 않았을 때 보여 줄 기본값을 설정하는 방법 태그 사이의 내용을 보여 주는 children 리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여 주는 props

※ 함수형 컴포넌트 구조 함수형 컴포넌트 특징 클래스형 컴포넌트보다 선언하기 편함 클래스형 컴포넌트 보다 메모리 자원 덜 사용 프로젝트를 빌드 배포할 때도 클래스형 컴포넌트보다 파일 크기가 작음(중요하지는 않음) ※ 클래스형 컴포넌트 구조 클래스형 컴포넌트 특징 state 기능 및 라이프 사이클 기능을 사용 가능 임의 메서드를 정의할 수 있음 ※ 리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있습니다.

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다. ※ 바벨 바벨을 자바스크립트 컴파일러라고 소개하며 최신 자바스크립트 문법을 사용할 수 있다고 나와있다. 더 정확하게 말하면 트랜스파일러라고 말할 수 있다. 트랜스 파일 : 한 언어로 작성된 소스 코드를 비슷한 수준의 추상화를 가진 언어로 변환하는 것을 말하며 컴파일러의 일종이다 JSX 1 2 3 4 5 6 7 function App() { return ( Hello react ); } cs 변환된 코드 1 2 3 function App() { return React.createElement..

리액트 프로젝트를 만드려면 우선 Node.js를 먼저 설치해야 합니다. Node.js는 크롬 V8 자바 스크립트 엔진으로 빌드한 자바스크립트 런타임입니다. 이것으로 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있습니다. Node.js 버전LTS 버전은 장기적으로 안정적인 지원을 제공하는 버전을 의미 운영체제 별 Node.js 설치 방법 macOs : Homebrew 설치 후 brew install node 명령어 입력 windows : nodejs.org/ko/ 다운로드 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org Yarn : npm을 대체할 수 있는 도구로 np..

리액트 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용합니다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 View만 신경 쓰는 라이브러리입니다. 컴포넌트 재사용이 가능한 API로 수많은 기능들을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동 방식을 정의합니다. 렌더링 사용자의 화면에 뷰를 보여준 것 렌더링 순서 렌더링 -> HTML 마크업(...) -주입-> DOM -> View 특징 Virtual DOM을 사용 Virtual DOM이란 ? 객체로 문서 구조를 표현하는 방법으로 XML이나 HTML로 작성합니다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용합니다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 ..