개발/React (2) 썸네일형 리스트형 SVG를 이용한 라인 그래프(Bar Chart) 만들기 SVG를 이용한 라인 그래프 만들기 계산 방식 데이터들 중 최솟값과 최댓값을 찾는다. 최댓값 - 최솟값을 하여 변화량(delta)을 구한다. y값을 계산하기 위해 데이터값에 최솟값을 빼주고 (svg 높이 / delta) 값을 곱해준다. ex) max=10, min=-10, svgHeight=100, data=0일 경우 y = (0 - (-10)) * (100 / 20) = 50 x값은 index * 컬럼 너비 + 컬럼 너비 / 2로 설정하여 각 컬럼의 중간에 기준점을 표시하도록 하였다. 데이터가 최솟값이거나 최댓값일 경우 svg로 표시할 경우 잘리는 경우가 발생할 수 있어 y에 offset을 더해주었다. y: (value - minValue) * (svgHeight / delta) + offset 코드 .. [정리] Thinking in React 1. UI를 계층적으로 쪼개라 - Single Responsibiliry Principle. 하나의 컴포넌트는 하나의 역할만 하도록 분리 2. 정적인 페이지를 만들기 - 재사용 가능한 컴포넌트와 props를 이용하여 데이터 모델을 렌더하는 정적인 페이지를 만들기 - 상호작용하는 페이지가 아닌 이상 state를 굳이 사용할 필요는 없음 - 작은 프로젝트는 상위 컴포넌트부터 하위 컴포넌트로, 큰 프로젝트는 하위 컴포넌트에서 상위 컴포넌트 순서로 3. UI의 state를 최소로 하기 - 부모 컴포넌트로 부터 props를 받아서 만들 수 있는지 - 상태가 계속해서 변하는지 - 다른 상태에서 계산할 수 있는지 4. state가 있어야할 곳을 정하기 - 대부분 부모 컴포넌트에서 state를 가지고 있음 5. 역방향.. 이전 1 다음
