목차 Components란? 컴포넌트는 재사용할 수 있는 단위를 말한다. 레고로 자동차를 만들 때, 다양한 크기의 블럭을 조립하여 만들 듯이 공통되는 UI를 조각내고 다양한 곳에서 조립하듯이 앱을 만들 수 있도록 나누는 것이 컴포넌트이다! //리액트 컴포넌트 예시 //클래스형 class App extends React.Component { render() { return Hello world! } } ▶ 컴포넌트 //함수형 function Head(){ return ( 제목1 제목2 ); } ▶ 컴포넌트 우리는 이미 리액트 컴포넌트를 사용해봤다. 리액트 컴포넌트는 HTML에 정의된 태그가 아닌 , 와 같이 사용자 정의 태그를 만드는 것이라 생각해도 될 것 같다. 클래스형 컴포넌트 React.Compone..

목차 Element const element = Hello, world; 리액트의 가장 작은 단위이다. Component와는 다르다! Element는 Component의 구성요소이며 화면에 렌더링할 DOM 정보를 React에 알려주는 객체이다. Element가 있기 때문에 값이 변경된 부분만 다시 렌더링 할 수 있다. 어떻게 가능할까? JS의 경우 변경점은 시간 뿐임에도 불구하고 root부터 모든 태그가 전체적으로 다 변경된다. React의 경우 //root 아이디를 가진 태그를 찾아서 루트로 선언한다 const root = ReactDOM.createRoot( document.getElementById('root') ); //현재 시간을 보여주도록 jsx 작성 function tick() { //ele..

목차 순수 HTML 파일에서 React를 사용해보자 일단은 순수 HTML에서 React를 사용하는 방법을 알아보자. CDN으로 불러오는 라이브러리들은 무슨역할을 하고있는걸까? React - 가장 기본적으로 필요한 라이브러리이다. Babel - 리액트는 JSX라는 문법을 사용하는데, 이 Babel이 JSX를 JS로 변환해준다. - JSX는 다음에 자세히 알아볼 예정. 예제에서 return Hello world! 부분이 JSX가 사용된 부분이다. React-DOM - 최종적으로 Babel을 통해 JS로 변환된 코드를 HTML DOM으로 변환해준다. - 이런 태그는 HTML에 존재하지 않는다. 이런 특이한 태그들을 HTML DOM으로 변환해준다. Script 설명 render() : DOM 노드 렌더링 시 필..

저는 JS와 부트스트랩으로 웹사이트를 만들어본 경험이 있는데 쌩 HTML, CSS, JS로 프론트를 관리하다보면... 만든사람만 알게되는 구조가 되고 심지어 만든사람조차 이게 어디서 호출되는 함수인지 알수없는 현상이 발생하더라구요 그래서.. 프론트엔드 개발자가 사용하는 가장 유명한 라이브러리, React를 배워보려합니다! React가 뭘까?! 간단하게 말해서 웹사이트를 만들 수 있는 자바스크립트 라이브러리. 동적으로 웹사이트를 변화시키려면 수많은 작업이 필요한데, 이 수많은 작업을 쌩 Javascript로만 관리하기엔 복잡하고 어려워서 나오게 된것이 리액트입니다. React 프로젝트 셋팅하기 1. Node.Js 설치 https://nodejs.org/en/ 해당 사이트에 접속해서 LTS 버전 설치 (20..