yon11b

교내 소프트웨어융합대학 학술제에서 프론트를 맡아서 공부한 것들을 정리해보았다. 불변성 let array=[1,2,3,4] //메모리 영역1 array.push(5) //메모리 영역1. 원본 데이터 수정 -> 불변성 지켜주지 x arrya=[1,2,3,4] //메모리 영역2=> 새로운 배열 할당. 불변성: 메모리 영역에서 값을 변경할 수 없다!! 왜 리엑트에서 불변성을 지켜야 하나? 상태 업데이트 원리 때문! react는 상태값을 업데이트 할 때 얕은 비교를 수행한다. 객체의 속성 하나하나를 비교하는 게 아니라 참조값만 비교하여 상태 변화를 감지한다. 이런 이유로 배열이나 객체를 업데이트할 떄 setState([..state,newState]) 와 같이 배열이나 객체를 새로 생성⇒새로운 참조값 생성⇒ 상태..

key 변경, 추가, 삭제 식별에 쓰임 element에 안정적인 고유성을 부여하기 위해 배열 내부의 element에 저장해야 한다. const numbers=[1,2,3,4,5]; const listItems=numbers.map((number)=> {number} ); key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이다. 대부분의 경우 데이터의 ID를 key로 사용한다. const togoItems=todos.amp((todo)=> {todo.text} ); 렌더링 한 항목에 대한 안정적인 id가 없다면 최후의 수단으로 항목의 idx를 key로 사용할 수 있다. const todoItems=todos.map((todo,inde..

react jsx 조건문 조건별로 className을 다르게 주고 싶었다. 그래서 한 블로그 글을 참고하여 { if (app.startTime 이렇게 코드를 짜봤다. 근데 아래와 같은 에러가 떴다. 그래서 저 에러를 고대로 구글링해보니 return에는 if 문을 쓸 수 없다는 것을 알 수 있었다. 우리가 자주 쓰던 자바스크립트 if문은 return () 안의 JSX 내에서는 사용 불가능합니다. if (어쩌구) {저쩌구} 이게 안된다는 소리입니다. 그래서 보통 return + JSX 전체를 퉤 뱉는 if문을 작성해서 사용합니다. 참고 블로그 return에는 if 대신 삼항연산자를 써야한다고 해서 중첩 삼항연산자를 이용하여 다시 코드를 짜봤다.

=Javascript XML JS랑 HTML이랑 짬뽕된 형태? JSX 사용 Question JSX 사용 X React.DOM.h1({className: 'question'},'Questions'); React.createElement('h1',{className: 'question'},'Questions'); 자식 노드 this.props.childeren Questions 하드코딩한 Questions 텍스트를 this.props.cihlderen으로 바꾼 코드 var Divider=React.createClass({ render: function(){ return ( {this.props.children} ); } }); 이렇게 jsx는 변수를 괄호 안에 감싸서 인식한다. 이 태그들은 같은 이름을 가진..

클라이언트 사이드 렌더링 최초 화면 로딩이 느림 화면 갱신이 빠름 필요한 부분만 부분 갱신 DOM 조작을 쉽게 할 수 있게 함 객체 지향 같은 느낌 ? 서버에서 데이터만 받아와서 사용 재사용 가능한 UI 컴포넌트 생성 랜더링 최소화 실제 DOM에 접근하여 조작하지 않고 이를 추상화한 js 객체를 구성 데이터 변경이 발생하면 virtual DOM을 rerendering 후 실제 DOM과 달라진 부분만 반영 server side rendering도 제공을 하기 때문에 초기 렌더링 속도를 향상시킬 수 있다. virtual dom이 무조건 빠른 실행을 보장하는 것은 아님 virtual dom 브라우저는 jsx 파일을 이해할 수 없다. 브라우저가 이해할 수 있도록 변환하는 과정이 필요하다. (그림 왼쪽 과정) 바..