본문 바로가기

react.js

 (4)
6. React View, Component 반복, 조건부 랜더링 헤이 에부리바디! 효근이에요! 오늘은 Component 의 반복, 조건부 렌더링과 간단한 To - Do List View를 제작해볼겁니다. 스타일은 css를 사용하여 제작하겠습니다. ToDo 하나의 데이터는 아래 json 데이터를 삽입하겠습니다. { title: '제목', date: '날짜', isDone: false, // 완료 } 제목과 날짜, 완료 체크가 있는 간단한 형태입니다. const data = [ { title: '제목1', date: '2020-09-27', isDone: false, }, { title: '제목2', date: '2020-09-27', isDone: true, }, { title: '제목3', date: '2020-09-27', isDone: false, }, ]; 위의..
3. React State 안녕하세요! 효그니에요! 와! 리액트! 엄청 빨리 다시돌아왔다! 이번 글에서 설명할 것은 React Component의 state입니다. State란? Component가 갖는 유동적인 데이터를 의미합니다. Class Component 카운터를 하나 만들어보겠습니다! class Counter extends React.Component { constructor(props) { super(props); // React.Component의 생성자 메소드입니다. this.state = { // this.state로 state를 설정합니다. number: 0, // number 초기 값 설정 }; this.handleCounter = this.handleCounter.bind(this); // 함수 바인딩 } h..
2. React Component (props, state, Class Component, Functional Component) 안녕하세요 효그니입니다! 꽤나 빠르게 새 글을 올리네요! 하핳! 오늘은 React에서의 Component에 대해 강의를 할 생각입니다! 자 시작해볼까요! 우선 Component란? React의 component란 상태 ( state ) 를 갖고 있고, 인자 값으로 Props 를 가지며, 반환 값으로 Element를 반환하는 "함수" 입니다! **** 이름의 첫 글자는 반드시 대문자여야합니다! **** {function App() { return ( Edit src/App.js and save to reload. Learn React ); } CRA를 사용하면 기본적으로 나오는 App Component 입니다! 반환 값을 어디서 보신 것 같다구요? 맞습니다. html 태그를 반환하죠!!! JSX라는 기법입..
1. React란? 그리고 CRA 설정 안녕하세요 효근입니다! 오랜만에 블로그를 복귀했습니다! 회사업무랑랑 외주업무랑 너무 쌓이는 바람에 늦게 되었습니다 ㅠㅠ.. 일단 오랜만에 돌아온 기념으로 여태까지 안올리던 React 에 대해 올려볼려 합니다! 한번 시작해 볼까요? 일단.. React 란? 페이스북에서 개발한 Javascript 라이브러리입니다. 재사용 가능한 UI를 생성할 수 있게 해줍니다. Virtual Dom ( 가상 돔 ) 이라는 개념을 탑재하여, 변경된 부분만 선택적으로 렌더링 할 수 있습니다! 와! 돔을 여럿 갖고 있지 않을 수 있어, html 파일이 단 한 개인 single page application 형태를 띄우고 있어요! 덕분에 최소한의 처리로 변경에 대하여 컴포넌트를 업데이트 할 수 있다는 장점을 갖고 있습니다! 아래 ..

티스토리툴바