본문 바로가기
반응형

React

 (18)
row 번호 자동으로 뽑아주는 함수 만들기 | 번호 | 제목 | 내용 | --------------------------- 1 key1 data1 2 key2 data2 3 key3 data3 4 key4 data4 5 key5 data5 6 key6 data6 7 key7 data7 8 key8 data8 9 key9 data9 10 key10 data10 11 key11 data11 12 key12 data12 ...... .... .. - 만들고 싶은 기능 - 만약 위와 같은 테이블을 만들어야 한다고 생각해 보자. 제목과 내용에 들어가는 값들은 어쨌든 key 값들이니 일일이 넣어줘야 할 것이다. 이 부분은 어쩔 수 없으니 넘어가자. 하지만 번호까지 1,2,3,4... 일일이 쓰는 건 너무 프로그래머로서 귀찮다. 또 항목 순서가 바뀌거나, 항..
datagrid 에 rowData 만들어서 넣어주기 - 고정 출력 행 있을 때 fruitName | color | store | price | ------------------------------------------------- apple | red | A | 800 | melon | green | B | 2500 | orange | | | | mango | yellow | C | 1200 | grape | | | | - 만들고 싶은 기능 - 위처럼 과일 목록 테이블을 만들어야 한다. 단, 과일 이름(fruitName 칼럼)은 항상 나온다. 모든 과일 이름들은 고정으로 출력되고, 나머지 값들은 있을 때만 나온다. - 문제 - 언뜻 생각하기에 간단할 것 같지만 생각보다 문제가 복잡하다. 일단 서버로부터 과일 정보 목록을 받아와야 한다. 그런데 DB에서는 데이터가 있는 과일만 se..
[React] 렌더링 기본 개념 정리 - 렌더링/렌더/커밋/가상DOM - 렌더링이란? - 리액트가 컴포넌트에게 UI 영역이 어떻게 보이기를 원하는지 props 와 state 를 바탕으로 요청하는 프로세스 - 렌더링 프로세스 개요 - 리액트는 컴포넌트 트리의 루트 컴포넌트부터 시작해서 아래로 순회하면서 업데이트가 필요한 모든 컴포넌트를 찾는다 컴포넌트에 플래그를 지정해 두고 렌더 함수를 호출하여 렌더 출력을 저장한다. 컴포넌트 트리 전체에서 렌더 출력을 수집한 후에 리액트는 새로운 객체 트리(가상 DOM)와 실제 DOM 을 비교하며 UI가 원하는 대로 보이도록 변경 사항을 수집한다. 참고1) 렌더 출력은 보통 JSX 문법으로 작성된다. 자바스크립트가 컴파일 될 때는 React.createElement() 함수로 변환된다. JSX를 이용해서 사람이 보기 편하도록 HTML 태그..
[React] store 에 있는 객체를 view 에 바인딩하여 출력할 때 주의할 점 - setProps @action setMyDetailProps(key, value) { this._myDetail[key] = value; } vs @action setMyDetailProps(key, value) { this._myDetail = {...this._myDetail, [key]: value}; } - React 에서 객체의 속성 값들을 화면에 바인딩하여 출력할 때 주의점 - 상세 정보를 조회하는 페이지에서는 값을 잘 맵핑하는 것이 중요하다. 화면에 출력되는 값들이 각자 따로 관리되는 게 아니기 때문이다. 상세 정보 객체가 하나 있고 그 객체 안에 있는 여러 속성들이 화면에 바인딩되어 출력되는 구조이다. 출력하는 값들을 묶어 놓은 상세 정보 객체는 보통 store 에서 들고 있는다 view 에서는 그 sto..
[React.js] 클래스형 setState 안 될 때 - 덮어쓰기 되는 경우 state = { isOpenModal: true, fruitList: [], }; onClickButton(e, ele) { let newFruitList = []; // 빨간색 과일 if(ele.name === "red") { newFruitList = [{ fruitName: "apple", fruitColor: "red", fruitPrice: "12000", },{ fruitName: "strawberry", fruitColor: "red", fruitPrice: "18000", }]; } else { // 노락색 과일 newFruitList = [{ fruitName: "banana", fruitColor: "yellow", fruitPrice: "7000", },{ fruitName: "ma..
[React] onChange 값이 한 박자씩 늦게 들어갈 때 / observable 변수 렌더링 뒤늦게 반영될 때 - 사용 기술 - React(class형) / mobx - 상황 설명 - Select1 | Select2 | Input type1 | type2 | title 폼이 있다. 폼 안에는 요소가 총 세 개 있다. select 두 개와 input 하나가 있다. 이 모든 요소들은 값이 store 에 있는 data와 바인딩되어 있다. select1 은 data.type1 과, select2 는 data.type2 와 바인딩해 놓았다. input 은 data.title 과 바인딩해 두었다. select 에는 각각 이벤트가 걸려 있다. 값이 바뀌면 onChange 이벤트가 발생한다. 받아주는 함수 내용은 두 가지다. 첫째로 store 가 들고 있는 data 에 값을 넣어준다. key-value 쌍으로 넣어주는데 dat..
[React] + dataGrid 트리 구조 테이블에서 합계 구하는 법 (feat. 재귀 함수) | 1월 | 2월 | 3월 | 4월 | 5월 | ... --------------------------------------------------------------------- 총 비용 | | | | | | --------------------------------------------------------------------- 재료비 | | | | | | --------------------------------------------------------------------- 시멘트 | | | | | | --------------------------------------------------------------------- 철근 | | | | | | -----------------------..
[React] 주요 LifeCycle 함수들 호출 시점 / 활용 방법 / 주의할 점 정리 리액트에서 LifeCycle 개념은 중요하다. state와 props를 알맞게 관리하고 렌더링을 의도한 대로 다루려면 LifeCycle 개념을 정확히 이해해야 하기 때문이다. 이참에 주요한 몇 가지 LifeCycle 함수들을 살펴보자. - constructor - constructor(props) { super(props); this.state = { date: new Date() }; this.handleClick = this.handleClick.bind(this); } / 호출 시점 > 생성자 constructor 는 컴포넌트가 마운트되기 전에 호출된다. / 활용 목적 > constructor 에서는 주로 state를 초기화하거나 이벤트 핸들러 메소드들을 바인딩한다. / 주의할 점 > 다른 구문보다..
반응형

티스토리툴바