본문 바로가기
728x90

전체 글112

4. State, Lifecycle 1. State리액트 Component의 변경 가능한 데이터state는 개발자가 정의한다.렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.JavaScript 객체state는 직접 수정할 수 없으며, 해서도 안 된다.변경을 원할 경우, setState 함수를 통해 수정해야 한다.class LikeButton extends React.Component { constructor(props) { super(props); this.state = { //현재 컴포넌트의 state를 정의하는 부분 liked: false }; } ...}// state를 직접 수정 (잘못된 사용법)this.state = { name: 'Inje'};// setState 함.. 2024. 7. 30.
3. Component, props 1. ComponentReact Component는 Function Component와 Class Component로 나뉜다. 최근에는 Function Component를 주로 사용하기 때문에 이를 중심적으로 살펴보고자 한다. Function Component컴포넌트는 데이터를 가진 props를 input으로 받아, output으로 element를 반환한다.그렇기 때문에 component가 화면에 렌더링 되지 않고, 출력된 element가 실제로 화면에 나타난다. cf) component의 이름은 항상 대문자로 시작해야 한다. - 예시하나의 props 객체를 받아서 인삿말이 담긴 element 리턴하는 componentfunction Welcome(props) { return 안녕, {props.nam.. 2024. 7. 29.
2. Element 정의Elements are the smallest building blocks of React apps.React의 Element는 React 앱을 구성하는 '요소'이다.(React) Element가 기술한 내용을 토대로, 실제 우리가 화면에서 보게 되는 DOM Element가 만들어진다.DOM Element : 실제 브라우저 DOM에 존재하는 ElementReact Element : 리액트 Virtual DOM에 존재하는 Element 형태Element는 자바스크립트 객체 형태로 존재한다.이 객체는 마음대로 변경할 수 없는 불변성을 갖는다.createElement : 객체를 만드는 함수   //기본형React.createElement( type, //DOM 노드인지, 아니면 컴포넌트 .. 2024. 7. 29.
1. JSX JSX 정의JSX(JavaScript XML)의 줄임말로 '자바스크립트에 XML을 추가한 확장형 문법'이다.이때 XML 또한 HTML을 확장한 문법이므로, JSX는 하나의 파일에 자바스크립트와 HTMl을 동시에 작성한다.JSX는 간결성, 가독성, 버그 발견 가능성이 높고,  Injection Attacks 방어가 가능하다는 장점이 있다.//두 코드의 실행 결과는 동일//JSX를 사용한 코드const element =( Hello, world! ; ) //JSX를 사용하지 않은 코드//React.createElement() 사용const element = React.createElement( 'h1', {className : 'greeting'}, 'Hello', wo.. 2024. 7. 29.
728x90

티스토리툴바