공부 기록노트/React

리액트 공부 day1 - 상속

React.Component 에 있는 기능들을 class App 이 상속받는법react에서 class를 만들때 2가지 요소가 있어야한다.  1) constructor :     부모의 생성자를 호출한다. App의 부모는  React.Component 이다.     무조건 super(props); 를해주어야 App이 가진 constructor를 실행한다. 2) render() console.clear();class App extends React.Component { constructor(props) { super(props); } render() { return ( 안녕하세요. {this.props.name} ) }}React..

리액트 공부 day1 - 태그를 만드는방법, 랜더링하는 방법

랜더링하는 방법설명하기엔 조금 복잡하기때문에 일단 실습을 통해서 어떻게 랜더링이 되는지부터 알아보았다. 일단 화면에서 tag를 랜더링하려면 아래와 같이 tagname과  property(속성)을 작성해준다.  tagName은 무조건 대문자로 시작해야한다. (-> MyTag)property인 name = "홍길동"은 함수에서 인자값으로 넘어가서 사용된다. ReactDOM.render(, document.getElementById('root'));function MyTag(props) { //console.log(props.name); 출력값 : "홍길동" return Hello {props.name};}; 콘솔창에 홍길동이 찍히는것을 확인할 수 있다. JSX에 속성값을 {} 괄호안에 넣어서 출력할 수 ..

리액트 공부 day1 - JSX

리액트는 복잡한 문제를 풀기위한 기술이다.리액트는 웹 초급자를 위한 기술은 아니라고 하니, facebook이 복잡한 문제를 어떻게 풀었는지를알아본다는 생각으로 공부를 시작해보겠다. JSX는 자바스크립트 구문에서 HTML엘리먼트를 편하게 쓸 수 있는 방법이다.필자는 코드펜으로 간단하게 실습중이다. codepen에 가입후 어려움없이 바로 실습할 수 있어서 좋았다.처음에 설정값을 변경해줘야하니 이 부분은 꼭 해주길 바란다. 설정사항1.코드펜 pen Settings > JS > JavascriptPreProcessor > Babel 설정2.                                         > Add External Scripts/pen > 주소 추가(cdnjs 홈페이지에서 링크복사)htt..