프론트엔드 공부/react (31) 썸네일형 리스트형 이벤트적용(함수형,class) 1.class로 event 발생시키기 객체형state,constructor형 state/setState 두가지방법 class Component extends React.Component{ //1.객체형 state // state = { // count : 0, // }; //2.contructor 형 state constructor(props){ super(props); this.state = {count:0}; } render(){ return ( {this.props.message}이것은 클래스로 만든 컴퍼넌트! {this.state.count} ); } //라이프사이클 훅 맛보기 componentDidMount(){ setTimeout(()=>{ //this.state.count = this.state.count +1; //state변경해주는 함수실행,React.Component에 이미구현 //1.setStat.. 함수와 class를 이용한 component 만들기, default 값 설정하기 1.함수를이용한 컴퍼넌트 //babel : 예전브라우저, 순수한 자바스크립트로 변경 //https://babeljs.io/setup#installation 에서 cdn 가져올수 있다. //즉, babel + jsx로 사용하게 되면 react > javascript로 바꿀수 있도록 컴파일 해줌 //함수를 이용한 Component //props ---> {message = "안녕하세요"} function Component(props){ //이부분이 렌더가 다시일어나는 부분 return ( {props.message}이것은 함수로만든컴퍼넌트 ); } 2.함수형 Component 기본값 설정하기 //함수형 Component 기본값 설정하기 function Component(props){ //이부분이 렌더가 다시.. React JSX 문법 왜 React.createElement 가 아닌 JSX를 쓰는지? 가독성, bable과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉬움 JSX 문법 -최상위 요소는 하나 -최상위 요소 리턴하는 경우, ()로 감싸야한다. -자식들을 바로 랜더링하고 싶으면 자식들 사용 => Fragment (최상위 요소가 있는 상태에서 자식을 바로랜더링하고 싶을때, 최상위 요소를 로 묶어주고 자식요소들을 랜더링) -자바스크립트 표현식을 사용하려면, {표현식}사용(변수도 사용가능) -if문 사용할수 없음( 삼항연산자 , 논리연산자를 사용) -style을 이용해 인라인 스타일이 가능 -class 대신 className을 사용해야 class를 적용 -자식요소가 있으면 꼭 닫아야하고 자식요소가 없으면 열면서 닫아야 한다. what ReactDOM.render / React.createElement(type,[props],[...children]) react cdn 개념이해 //기존 방식 const component = { message : "init", count : 0, render(){ return `${this.message} : ${this.count}` }, }; //rootElement = dom function render(rootElement, component){ rootElement.innerHTML = component.render(); } //초기화 //값이 바뀔때마다 앞뒤로 render해줘야함 render(document.querySelector("#root"),component); document.querySelector("#btn-plus").addEventListener("click",function(){ component.message = ".. react 개념 react 1.angular vs react vs vue angular: 크로스플랫폼, 모든기능이 프레임워크 안에서 이루어짐(full framework) react: view에 초점을 맞춘 라이브러리(library) view: (framework,library)view의 생태계를 끌어와 프레임워크로 사용, 라이브러리로도 사용 (여러가지사용성) 2.only rendering & update 3.component based link,title,content,card 등으로 나누어 사용(component Tree, dom tree와 유사 but 직접 컴퍼넌 트를 만들어 재활용 ) 4.virtual dom(dom을 react에 위임) 가상의 돔을 이용하여 이전과 이후 상태 비교, 바뀐 부분을 자동으로 변경 St.. 이전 1 2 3 4 다음
