React.js | Vue.js(9)
-
[React] 클래스형 컴포넌트
class형 컴포넌트에서는 render() 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환 해야 한다. 리액트 공식 메뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장 하고 있지만, 클래스형 컴포넌트가 완전히 사라지는것은 아니므로, 그래도 공부는 해두는 것이 좋다.
2021.12.03 -
[React] JSX 문법의 몇 가지 규칙
1. 감싸인 요소 컴포넌트에 여러 요소가 있다면, ⚠️반드시⚠️ 부모 요소 하나로 감싸야 한다. 아래 첨부한 사진 처럼 코드를 작성해 보자. SyntaxError: /Users/사용자/Desktop/Nest_ex/hello-react/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment ...? (6:6) 그럼 위와 같은 에러 메시지를 볼 수 있다. 요소 여러 개가 부모 요소 하나에 의하여 감싸져 있지 않기 때문에 오류가 발생 했다. 이런 오류는 다음과 같이 해결 할 수 있다. 이건 이해를 돕기 위해 극단적인 예시를 들어 만든 태그이다. 절대 이렇게 하면 안 된다 !🙅 아무튼 이렇게..
2021.12.03 -
[React] 초기 렌더링
어떤 UI 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다. 리액트에서는 이를 다루는 render 함수가 있다. render(){...} 이 함수는 컴포넌트가 어떻게 생겼는지를 정의하는 역할을 한다. 이 함수는 html형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어 갈 수 있다. 이 때, render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 한다. 이렇게 최상위 컴포넌트의 랜더링 작업이 끝나면 지니고 있는 정보들을 사용하여 HTML마크업(markup)을 만들고, 이를 우리가 정하는 실제 페이지의 DOM요소 안에 주입한다. ReactD..
2021.12.03