React

프론트엔드 코드를 작성하면서 여러가지를 시도해볼 수 있는 사이트React 등 다양한 환경에 대한 기본 설정이 되어있다.바로가기리액트를 공부하면서 이 CodeSandBox를 사용할 생각이다.CodeSandBox 사이트에 들어간다.우측 상단의 Create Sandbox 를

DOM (Document Object Model)문서를 논리 트리로 표현브라우저가 이해하는 element 의 원형이다!참고순수 자바스크립트특정 라이브러리나 프레임워크를 사용하지 않은 그 자체의 자바스크립트여기에서 js 체험 가능!위 사이트에서 js뿐만 아니라 html,

과연 결과는~굿~생각해보니 React를 쓰지도 않았다.. (JSX만 씀)React.createElement 를 활용해서 다시 해보자children에 리스트를 넣어서 해결한 코드하지만 이렇게되면 원했던 결과가 나오지 않는다.원치 않았던 <div>가 하나 더 생기기

위 처럼 사용 가능JavaScript를 HTML처럼 사용할 수 있다! (JavaScript의 확장 문법)해당 JavaScript (React, ReactDOM 사용) 코드를 JSX를 사용해서 줄여보겠다.보이듯, JSX를 사용한다면 편하게 element 생성이 가능하다.

똑같은 엘리먼트를 계속 찍어내기를 찍어내보자성공적.이때, paint -> Paint 로 이름을 바꿔준 이유는<p>나 <span>같은 태그로 착각하지 않기 하기 위함!React.Fragment(<>)에 있는 자식 요소를 <Paint>가 자동대로 ch

props의 속성값에 따라서 다른 엘리먼트를 생성하고 싶다!예를 들어, text라는 props의 속성값의 첫번째 문자가 대문자라면 <h1>로 나타내고 아니라면 <h3>로 나타내고 싶다Text라는 custom element를 만들어element에서 하나는 대문