휘적이는 기록공간

React 공식문서를 기반으로 작성된 포스팅입니다 element Rendering 포스팅 에서 다뤘던 시계함수 에시를 다시 살펴보겠습니다. 엘리먼트 렌더링포스팅에서는 UI를 업데이트하는 한 가지 방법만 배웠습니다. 렌더링 된 출력값을 변경하기 위해 ReactDOM.render()를 호출하는 방법이었습니다. function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); https://codepen.io/hihui/pen/MWEVqep React_T..

React 공식문서를 기반으로 작성된 포스팅입니다 컴포넌트는 'prpos'라는 임의의 입력을 받은 후 element를 반환합니다. 함수 컴포넌트와 클래스 컴포넌트 function Welcome(props) { return 안녕하세요, {props.name}님; } 이 함수는 데이터를 가진 하나의 props 객체 인자를 받은 후 element를 반환하는 컴포넌트입니다. 이러한 컴포넌트는 자바스크립트 함수이기 때문에 말 그대로 '함수 컴포넌트'라고 호칭합니다. const Welcome = (props) => { return 안녕하세요, {props.name}님 } 사실 React에서는 ES6의 화살표 함수를 이용한 함수 표현이 잦습니다. 앞의 예시를 화살표함수로 표현하면 위와 같습니다. class Welco..

React 공식문서를 기반으로 작성된 포스팅입니다 element는 React App의 가장 작은 단위입니다. element는 화면에 표시할 내용을 기술합니다. JSXf를 이용해서 element 만들기 const element = This is element; createElement를 이용해서 element 만들기 const element = React.createElement( 'h1', {className: 'greeting'}, 'This is element' ); 브라우저 DOM element와 달리 React element는 일반 객체이며 쉽게 생성할 수 있습니다. DOM은 element와 일치하도록 DOM을 업데이트합니다. component와 element를 혼동할 수 있습니다. element..

React 공식문서를 기반으로 작성된 포스팅입니다 JSX(JavaScript XML) const element = Hello, world!; 결과 -> JSX는 JavaScript를 확장한 문법입니다. React element를 생성하며 이 태그 문법은 문자열도, HTML도 아닙니다. React에서는 본질적으로 렌더링 로직이 UI로직 (이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다. 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신 둘 모두를 포함하는 '컴포넌트'라는 느슨하게 연결된 유닛을 통해 강한 연결을 방지합니다. 리액트에서 JSX가 필수사항은 아니지만 1. JavsScript 코드..

- 데이터가 없다면 에디터를 있다면 해당 데이터를 보여주는 뷰를 만들어야하는 상황 - 문제점 input tag, textarea, div 태그에서 들어있는 데이터를 뿌리면 모두 화면에서 html태그가 보여진다.원하는 것: 굵은 글씨 결과물: 굵은 글씨 -이유cross-site scripting을 예방하기 위하여! cross-site scripting(XSS)관리자가 아닌 다른 이가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점이다. 이 취약점으로 사용자의 정보(쿠키, 세션 등)을 탈취하거나, 자동으로 비정상적인 기능을 수행하게 할 수 있다. 예를 들어 textarea가 있을 때 이런 xss공격을 막기 위한 무언가를 하지 않으면 />이런식으로 외부에서 값을 억지로 넣어도 작동이 될 수 있..