react (8) 썸네일형 리스트형 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] 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 시작하기 - 09 - textarea, input, select 등 폼 form 태그 다루기 사용자로부터 값을 입력받는 form 태그는 자주 사용한다. textarea, input select 등 여러 태그가 있다. 리액트에서는 이러한 form 태그를 쉽게 다룰 수 있도록 만들어 놓았다. 특히 value 를 번거롭게 다루지 않고 손쉽게 다룰 수 있도록 해 두었다. - 220601 참고자료 - https://ko.reactjs.org/docs/forms.html React 시작하기 - 04 - 클래스 컴포넌트, 함수 컴포넌트, props 주고받기 React에서는 컴포넌트라는 개념이 있다. 어떤 요소를 미리 만들어두고 여러 번 꺼내서 재사용할 수 있다. 만드는 방법은 클래스로 만드는 방법과 함수로 만드는 방법이 있다. props라는 속성값을 이용하여 컴포넌트 안에서 쓰는 특정 값을 편하게 관리할 수 있다. -------------------root1-------------------------------- -------------------root2-------------------------------- -------------------root3-------------------------------- -------------------root4-------------------------------- -------------------root.. 이전 1 다음