본문 바로가기

내마음대로만들어보자/React58

[공식문서]엘리먼트 렌더링 엘리먼트는 React 앱의 가장 작은 단위라고 보면된다. 엘리먼트는 화면에 표시할 내용을 기술한다. const element = hello, world; 엘리먼트는 컴포넌트의 구성요소이므로 둘을 헷갈리면 안된다! 이 안에 들어가 있는 모든 엘리먼트를 React DOM에서 관리하기 떄문에 이것을 루트(root) DOM 노드라고 부르고, React 엘리먼트를 루트 DOM 노드에 렌더링 하려면 둘다 ReactDOM.render()로 전달하면된다. 예시로 실시간으로 시간이 변경되는 내용에 대해 알아보자. function tick() { const element = ( hello, world It is {new Date().toLocaleTimeString()} ); ReactDOM.render(element, .. 2021. 8. 23.
[공식 문서] JSX 소개 1. JSX문법 변수 선언방식 const element = Hello, world!; JSX는 자바스크립트를 확장한 문법이며, JSX는 React의 엘리먼트를 생성한다. 2. JSX란? 리액트에서는 렌더링 로직이 (이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터를 준비하는 방식 등)과 연결된다. 3. JSX에 표현식 포함하기 아래 예시에서 name이라는 변수를 선언한 후 중괄호로 감싸 JSX안에 사용해보자. const name = 'kang'; const element = hello {name} ReactDOM.render ( element, document.getElementById('root') ); JSX 중괄호 안에는 유효한 모든 자바스크립트 표현식을 .. 2021. 8. 23.
[공식 문서] React 시작하기 React 공식문서의 안내서에 나와 있는 거의 모든 코드들은 아래 CodePen에서 수정이 가능하다고 한다. https://codepen.io/pen?&editors=0010 Create a New Pen ... codepen.io 시작하기에 앞서 공식문서를 보는 방법에 대해서도 알아야할 것 같다. 내게 필요한게 무엇이고 어떤 내용을 참조해야하는지 알아야 빠르게 내가 필요한 부분만 확인하여 테스트해볼 수 있을 것 같다. 공식문서에서 엘리먼트와 컴포넌트로 이루어져 있는 React앱의 구성 블록들을 이해해보면 복잡한 앱을 만들 수 있을거라고 한다! React는 자바스크립트 라이브러리이며, 자바스크립트의 기본적인 이해가 필요하므로 해당부분도 별도로 공부해두자. https://developer.mozilla.o.. 2021. 8. 23.
[firebase] 우정테스트 사이트 만들기(Feat.리액트) https://firebase.google.com/?hl=ko Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 1. 로그인 후 프로젝트를 추가해보자. 2. 컬렉션ID지정 2. 문서 추가(질문,답변) 2021. 8. 12.

티스토리툴바