더보기 모든 리액트에 대한 정보는 공식 문서와 "소플의 처음 만난 리액트"를 공부하고 작성한 내용입니다. 리액트 컴포넌트은 개념적으로 자바스크립트의 함수와 비슷하다. 함수가 입력을 받아서 출력을 내뱉는 것처럼, 리액트 컴포넌트도 입력을 받아서 정해진 출력을 내뱉는다. 리액트 컴포넌트 = 그냥 하나의 함수 컴포넌트 만들기 1. 함수형 컴포넌트 function Welcome(props) { return 안녕, {props.name}; } 하나의 props를 받아서 리액트 엘리먼트를 리턴 = 함수 컴포넌트 2. 클래스 컴포넌트 class Welcome extends React.Component { render() { return 안녕, {this.props.name}; } } 함수 컴포넌트와의 차이점 : 리액..

더보기 모든 리액트에 대한 정보는 공식 문서와 "소플의 처음 만난 리액트"를 공부하고 작성한 내용입니다. Elements are the smallest building blocks of React apps. 위 문장을 번역하면 엘리먼트는 리액트 앱의 가장 작은 빌딩 블록들이라는 의미가 된다. 이처럼 엘리먼트는 웹사이트에 대한 모든 정보를 담고 있는 객체인 (DOM)에서 사용하는 용어이다. 엘리먼트 렌더링 하기 엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해서 렌더링 이라는 과정을 거친다. 태그안에 리액트 엘리먼트들이 렌더링 되며 이를 React DOM node라고 부른다. const element = 안녕, 리액트! React.DOM.render(element, document.getElementB..

더보기 모든 개발 언어 및 라이브러리의 기본은 "공식문서" React 공식 문서를 통해 공부하였습니다. 출처 : https://ko.reactjs.org/docs/introducing-jsx.html # Hello World const root = ReactDom.createRoot(document.getElementById('root)); root.render(Hello, world!); 위 코드는 페이지에 "Hello, world!"라는 제목을 구현한다. JSX 소개 const element = Hello, world!; JSX : JavaScript를 확장한 문법, JavaScript의 모든 기능이 포함되어 있음 JSX는 React "엘리먼트(element)"를 생성한다. JSX란? React에서는..