라이브러리/React js 다한(dahan) 2021. 1. 23. 15:57
이번 시간은 react 외부 함수형 컴포넌트 가져오는 방법에 대해 알려드리고자 합니다. 컴포넌트 만들기 모듈 내보내기(export) 및 가져오기 (import)를 통해 외부 함수형 컴포넌트를 가져올 수 있습니다. 일단 사이트에서 header 부분을 담당할 header 컴포넌트를 만들어보겠습니다. header.js import React from "react"; const header = () =>{ return( CYH Portfolio HOME ABOUT PORTFOLIO BLOG 사는곳: 서울특별시 영등포구 email: choyoungho95@gmail.com © 2021 CYH Portfolio. ) } export default header header 컴포넌트에서 export default [컴..
더 읽기
라이브러리/React js 다한(dahan) 2019. 8. 10. 17:37
렌더링은 클라이언트(사용자, 방문자 등)에서 서버의 파일을 브라우저에 뿌려주는 과정이다. 코드로 얘기하자면 처음 태그(돔, DOM)가 나오고 그 다음에 , 순으로 나오는 것을 확인할 수 있다. 그러면 여기서 문제, HTML, CSS, JavaScript 중에서 가장 먼저 렌더링되는 것은 무엇일까? 정답은 HTML이다. 생각해보자. 우리의 컴퓨터 및 프로그램은 위에서 아래로, 좌에서 우로 문서를 파싱한다. 즉, 문서의 바탕이 되는 html을 가장 먼저 읽고 head안에 CSS파일을 읽는다. 그리고 최종으로 JavaScript가 렌더링된다. 즉, HTML -> CSS -> JavaScript로 렌더링이 진행되며 렌더링은 브라우저에 뿌려주는 과정을 말한다. 그렇다면 React의 조건부 렌더링은 무엇일까? 조건..
라이브러리/React js 다한(dahan) 2019. 8. 4. 23:52
1. React 기본 문법 import React, {Component} from "react"; class App extends Component{ render(){ return( Hello ); } } export default App 2. css 적용 방법 App.css .App{ background: black; color: aqua; font-size: 36px; padding: 1rem; } App.js import React, {Component} from "react"; import "./App"; class App extends Component{ render(){ return( Hello ) } } export default App; 3. 두개 이상의 코드 처리하는 방법 - 두개 이상의..
라이브러리/React js 다한(dahan) 2019. 8. 4. 22:53
React js는 프론트엔드 라이브러리이다. 요즘의 웹은 옛날과는 다르게 웹 페이지보다는 웹 애플리케이션으로 동작한다. 웹 페이지의 경우는 단순히 HTML, CSS, JavaScript로 이루워졌다면 웹 애플리케이션은 브라우저 상으로도 자연스러운 흐름으로 많은 것들을 할 수 있게 해준다. 예를들어, 아래와 같은 HTML코드가 있다고 가정해보자. Hello document.querySelector("#Hello").innerText = "aaa"; 이 Hello라는 문자열을 바꿔주려면 JavaScript를 이용해 DOM 엘리먼트에 대한 레퍼런스를 찾고, 해당 DOM에 접근하여 원하는 작업을 해줘야 한다. 이러한 작업은 소규모 프로젝트할 때는 상관없지만 대규모 혹은 다양한 인터페이스를 제공하게 된다면, 많은..