JavaScript/React.js Lecture (10) 썸네일형 리스트형 4. React 생명주기 엄청 빠르게 돌아온 효그니가 이번에 설명할 것은 React Component의 생명주기입니다. 저번에 설명했듯이 Component 는 클래스형, 함수형 이 두 가지가 있다고 했었죠? 각각의 Component의 생명주기 방식이 다릅니다. Class Component class Test extends React.Component { componentWillMount() { console.log('componentWillMount'); } componentDidMount() { console.log('componentDidMount'); } componentWillReceiveProps(nextProps) { console.log('componentWillReceiveProps'); } shouldCompon.. 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 형태를 띄우고 있어요! 덕분에 최소한의 처리로 변경에 대하여 컴포넌트를 업데이트 할 수 있다는 장점을 갖고 있습니다! 아래 .. 이전 1 2 다음
