본문 바로가기

React49

데이터를 받아 차트에 시각화하기 사용자의 데이터를 받아 차트로 시각화하기 오늘은 사용자가 입력한 데이터를 받아서 차트로 시각화해보는 작업을 했다. 이를 위해 별도의 폴더에 두 개의 파일을 만들어서 하나는 차트의 전체적인 구조를 담고, 다른 하나에는 차트의 막대와 막대에 채워질 시각적 효과를 설정해주었다. Chart 파일에서는 map 메서드를 활용해서 차트에 쓰일 데이터를 담고있는 파일의 데이터를 가져와 dataValues 매개변수에 저장하고 이 데이터 중 value 값으로 새 배열을 만들도록 설정했다. 그리고 차트에 반영될 최대값을 Math 객체의 max 속성을 사용하여 맵핑한 배열을 모두 저장하도록 했다. 이렇게 하면 이 상수에 12개의 value 값이 저장된다. 💡 Max 속성: 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를.. 2023. 5. 11.
key 속성, 선택한 연도의 리스트 표출, 조건부 내용 출력 key 속성 사용해서 객체 내 id 연결하기 어제까지 웹페이지를 만들면서 콘솔창을 보면 항상 뜨는 오류가 있었다. 그 오류로 인해 기능이 작동을 안하는 문제는 없었지만 신경쓰였다. key 속성이 없어서 나타나는 오류였는데, 오늘 그 문제를 해결해주었다. App.js 파일 내의 지출예시 배열에는 각 객체에 임의로 설정한 id 키-값이 있고, 사용자 입력양식을 담고 있는 파일의 함수에도 랜덤숫자가 새로운 지출데이터에 추가되도록 한 코드가 있다. 이 id들을 이용하여 장기적으로 사용자 입력양식을 사용하며 오류를 방지하기 위해 key 속성을 사용해서 고유 id와 연결해주었는데, 기존의 동적인 리스트에 코드를 추가해주는 것으로 마무리됐다. (고유 id를 부여하는 방법으로 랜덤숫자를 사용하는 것은 부적합하다. 별도.. 2023. 5. 10.
양식 제출처리, 컴포넌트 연결, 웹페이지 동적변환 양식을 제출하여 데이터 받기 및 state 끌어올리기를 통해 컴포넌트 연결하기 어제 만든 양식은 버튼 타입이 submit이어서 양식이 제출되면 새로운 페이지가 로드되는 동작이 나타나게 된다. 현재 만든 웹페이지에서는 그런 동작이 불필요하기에 이를 없애주는 처리를 해보았다. 위 코드는 form 자체에 연결된 이벤트 함수인데, 기본동작을 막기 위해 event 매개변수를 사용하여 preventDefault 메서드를 사용해주었다. 그리고 제출이 되면 받을 데이터에 대한 객체를 만들어주었다. itemNameChange, priceChange, dateChange는 어제 useState를 사용하며 정의한 상태 값이다. 또한, 이 객체는 양식데이터를 담고 있는 부모파일인 ExpenseUser 파일의 onUserFor.. 2023. 5. 9.
이벤트 리스너 추가, useState 훅 사용, 양식 추가 등 버튼에 이벤트리스너 추가하기 오늘은 새로 시작한 리엑트 파일 내에 이벤트리스너를 추가해보았다. 자바스크립트에서는 addEventListner 메서드를 사용했다면, 리엑트에서는 on props를 사용했다. 위 코드는 버튼에 onClick 이벤트리스너가 설정되어있는 코드이다. 이는 해당 버튼을 클릭했을 때 특정 이벤트가 발생되도록 하는 코드이며, 별도 함수를 통해 그 이벤트를 정의할 수 있다. 위 코드가 이벤트 함수인데, 함수 이전에 자바스크립트의 배열 구조분해 방법과 useState 훅을 사용해보았다. 💡 배열 구조분해: 배열을 선언하고 할당할 때, 배열의 요소를 추출하여 개별 변수로 할당하는 것을 배열 구조분해라고 한다. 기존에는 배열의 요소를 인덱스를 사용하여 하나씩 변수에 할당했지만, 구조분해를 통해.. 2023. 5. 8.
리액트 처음부터 다시 복습 리액트 처음부터 다시 복습하기 최근 리액트를 시작하고 나서 진도를 나간 며칠동안 도저히 못하겠다는 생각이 들었다. 수업을 들으며 강사가 과제를 내줘도 손을 댈 수가 없고, 결국 따라하기만 하는 나를 볼 수 있었다. 궁금한 것이 풀려도 앞뒤로 지식이 연결되지 않았기에 새로운 문제를 발생시켰다. 그래서 결국 리액트 강의를 처음부터 다시 보고있다. HTML, CSS, 자바스크립트도 모두 현재 듣고있는 웹개발 100일 챌린지에서 처음부터 다시 시작한 것인데, 리액트 강의도 똑같이 진행되고 있다. 처음에 백엔드와 함께 진행하려 했는데, 큰 실수였다고 본다. 둘 다 어려운 코스인데, 어느 하나를 제대로 잡지도 못할거면서 어려운 것을 두 개나 등에 지고 가려하니, 백엔드와 리액트 두 곳에서 모두 어려움과 코드 따라하.. 2023. 5. 6.
컴포넌트의 중요사항, 동적 렌더링, 리스트에 필터 적용 제어된 컴포넌트와 제어되지 않은 컴포넌트 및 Stateless 컴포넌트와 Stateful 컴포넌트 리액트에서 컴포넌트는 크게 제어된 컴포넌트와 제어되지 않은 컴포넌트로 구분된다. 제어된 컴포넌트는 부모 컴포넌트로부터 props로 전달받은 상태를 변경하는 것이 아닌, 자체적으로 state를 가지고 변경하는 컴포넌트이다. 이때 state를 업데이트할 때는 반드시 setState() 메서드를 사용하여 업데이트를 해야한다. 제어되지 않은 컴포넌트는 자체적으로 state를 가지지 않으며, 부모 컴포넌트에서 전달받은 ref를 사용하여 DOM에서 직접 값을 가져오거나 업데이트하는 컴포넌트이다. 이 둘은 각각 장단점이 있는데, 제어된 컴포넌트는 리액트의 특징 중 하나인 '단방향 데이터 흐름'을 따르기 때문에, stat.. 2023. 5. 4.

티스토리툴바