Skip to main content

4 posts tagged with "DOM"

View All Tags

· 3 min read
const paint = () => (
    <>
        <h1>Hi</h1>
        <h3>Bye</h3>
    </>
)
  • 지난 시간에 만들어 변수로 할당했던 내용을 paint 라는 함수로 변경

함수를 호출하여 element 변수에 할당

const element = (
    <>
        {paint()}
        {paint()}
        {paint()}
    </>
)
  • element라는 변수에 paint함수를 3번 호출하는 react 요소를 만들어 할당

선언된 element를 rootElement에 render

ReactDOM.render(element, rootElemet)

parameter를 갖는 함수로 변경

const paint = (title, description) => (
    <>
        <h1>{title}</h1>
        <h3>{description}</h3>
    </>
)

const element = (
    <>
        {paint("Name", "Davidyoon")}
        {paint("Age", "34")}
        {paint("Country", "Korea")}
    </>
)
  • Custom Element를 커스텀하게 만들어 함수화 하여 필요한 곳에서 다양하게 활용할 수 있다

Custom Element 만들기

const Paint = ({title, description}) => (
    <>
        <h1>{title}</h1>
        <h3>{description}</h3>
    </>
)

const element = (
    <>
        <Paint title="Hello" description="hello" />
    </>
)
  • 함수형 Custom Element를 생성할때는 대문자 이름을 기본으로 한다
    • 소문자로 시작할 시 Warning 과 함께 정상적인 출력이 되지 않음
  • param값을 넣어주는 곳에는 props로 {} 안에 포함되어야 한다
  • HTML 태그 처럼 내부 요소처럼 파라미터를 작성해 주면 된다

Children 넣어보기

const Paint = ({title, description, children}) => (
    <>
        <h1>{title}</h1>
        <h3>{description}</h3>
        {children}
    </>
)

const element = (
    <>
        <Paint title="Hello!" description="it's me">
            <span>Davidyoon</span>
        </Paint>
    </>
)

  • Custom Element에는 children을 넣을 수 있다
  • Paint 컴포넌트에 span 태그 안에 커스텀한 children을 넣어서 사용 가능하다

정리

  • Function 은 재사용이 가능한 Element 즉, Custom Element를 만드는데 사용된다
  • Custom Element를 만들 때에는 기존 html tag와 구분하여 대문자로 만들어야 한다(필수)
  • Children은 당연히 개수에 제한이 없다

참조​

  • 패스트 캠퍼스 온라인 강좌(한 번에 끝내는 React의 모든 것 초격자 패키지 Online)

· 2 min read

멀티 Element 생성하기​

div className="root"에 어떻게 여러개의 element를 넣으 수 있을까 ?

<div id="root">

const rootElement = document.getElementById('root')
const element = (
    <div className='box' children= {[
        React.createElement('h1', null, 'Hi'),
        React.createElement('h3', null, 'Bye')
        React.createElement('h5', null, 'Hello')
    ]}
    )
  • children 속성에 여러개의 element를 넣을 수 있기 때문에 createElement를 사용하여 여러 개의 element를 생성할 수 있다
  • 단 위와 같이 생성할 경우 아래와 같은 형태가 된다
<div className='root'><div className='box'> </div></div>
  • 만약 root 밑에 div 태그 없이 h1, h3, h5를 생성하고 싶다면 React.Fragment를 사용한다
const element = ( <React.Fragment children={
    [
        React.createElement('h1', null, 'Hi'),
        React.createElement('h3', null, 'Bye')
        React.createElement('h5', null, 'Hello')
    ]
}
)
  • 위와같이 생성할 경우 아래와 같은 형태가 된다
<div className='root'><h1>Hi</h1><h3>Bye</h3> </h5>Hello</h5></div>
  • React.Fragment는 부모로써 감싸주는 역할을 한다
const element = ( <React.Fragment> {
    [
        <h1>Hi</h1>,
        <h3>Bye</h3>,
        <h5>Hello</h5>
    ]
}
    </React.Frament>
)
  • children 속성을 제거하고 JSX 를 사용하여 위와 같이 표현할 수도 있다
const element =
    <>
        <h1>Hi</h1>
        <h3>Bye</h3>
        <h5>Hello</h5>
    <>
)
  • 위와 같이 는 React.Fragment를 의미한다

참조​

  • 패스트 캠퍼스 온라인 강좌(한 번에 끝내는 React의 모든 것 초격자 패키지 Online)

· 2 min read

JSX와 Babel, JSX 다루기​

JXS

const element = <h1>Hello, World!</h1>

문자도 HTML도 아닌 Javascript 확장 문법

  • JSX를 사용하기 위해서는 Babel이 필요하다

Babel

JavaScript Complier 컴파일러: 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램 정확히 Babel은 Javascript 로 결과물을 만들어주는 컴파일러이다 소스 대 소스 컴파일러(Transpiler)라고 불린다 새로운 ESNext 문법을 기존의 브라우저에서 사용하기 위해서는 babel이 필수이다

  • JSX 문법을 기존 html에 작성하여 브라우저로 읽어도 원하는 동작을 하지 않는데, 이유는 바벨이 없어서 문법을 브라우저가 이해하지 못하기 때문이다

UNPKG

fast, global content delivery network for everthing on npm

React 코드를 JSX로 대체하기

<script type="text/babel">
    const rootElement = document.getElementById('root')
    const element = <h1 className="title">Hello World!</h1>
    ReactDOM.render(element, rootElement)
</script>
  • 바벨을 적용하여 브라우저에서 JSX를 사용 가능하도록 적용

Spread 연산자

const props = {className: titleClassName, children: text}
const element = <h1 {...props} />

props로 생성된 객체를 h1 태그 안에 각각의 요로소 key value 형태로 넣어주는 연산자

const element = <h1 className={props.className} children={props.children} />

위와 같이 표현할 수도 있다

정리

JXS 는 React.createElement 표현식 Babel은 Javascript compiler JSX다루기 spread 연산자

· 4 min read

React​

  • 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
  • Virtual DOM / JSX / Flux / Functional Programming

Dom 다루기 Element 생성하기​

Dom

  1. 웹 페이지는 어떻게 만들어 질까?
  • DOM(Document Object Model)은 웹 페이지에 대한 인터페이스
  • 웹 브라우저가 원본 HTML 문서를 읽어들인 후, 스타일을 입히고 대화형 페이지로 만들어 뷰 포트에 표시하기까지의 과정을 "Critical Rendering Path"라고 한다
  • 이 과정 여러 단계로 나누어져 있지만, 이 단계들을 대략 두 단계로 나눌 수 있다
  • 첫 번째 단계에서 브라우저가 읽어들인 문서를 파싱하여 최종적으로 어떤 내용을 페이지에 렌더링할지 결정
  • 두 번째 단계에서 브라우저가는 해당 렌더링을 수행
  • 첫 번쨰 과정을 걸치면 "렌더 트리"가 생성된다
  • 렌더 트리는 웹 페이지에 표시될 HTML 요소들과 이와 관련된 스타일 요소들로 구성된다
  • 브라우저는 렌더 트리를 생성하기 위해 다음과 같이 두 모델이 필요하다
    • DOM(Document Object Model) - HTML 요소들의 구조화된 표현
    • CSSOM(Cascading Style Sheets Object Model) - 요소들과 연관된 스타일 정보의 구조화된 표현

Vanilla JS

  • 순수 자바스크립트
  • 특정 라이브러리나 프레임워크를 사용하지 않은 그 자체의 자바스크립트

CodeSandBox

  • 프로트엔드 코드를 작성하고 이것저것 시도해볼 수 있는 모래상자(놀이도구)
  • React 등 다양한 환경에 대한 기본 설정이 되어있음
  • https://codesandbox.io/

CDN

  • Content Delivery Network
  • 웹에서 사용되는 다양한 컨텐츠(리소스)를 저장하여 제공하는 시스템

Element 생성하기

  1. vanilla JS
const rootElement = document.getElementById("root")
const element = document.createElement('h1')
element.textContent = "Hello, World!"
rootElement.appendChild(element)
  1. React
const rootElement = document.getElementById("root")
const element = React.createElement('h1', { children: "Hello World!"})
ReactDOM.render(element, rootElement);

참조​

  • 패스트 캠퍼스 온라인 강좌(한 번에 끝내는 React의 모든 것 초격자 패키지 Online)
  • Dom은 정확히 무엇일까? https://wit.nts-corp.com/2019/02/14/5522
  • MDN
    • Mozilla Develop Network
    • 웹 표준과 모질라 프로젝트에 대한 개발 문서들이 담긴 모질라의 공식 웹 사이트