React49 스프레드 연산자, 양식 제출, state 끌어올리기 등 스프레드 연산자를 활용하여 여러 state를 하나로 묶기 어제 수업을 진행하며 세 개의 state를 개별적으로 사용하는 코드를 만들게 되었다. 이 코드가 전혀 나쁜 코드는 아니지만, 이를 대체할 수 있는 방법이 있다. 이 방법은 여러 state를 한개의 객체로 묶어서 사용하는 것이다. 위 이미지의 코드에서는 초기값이 빈 문자열인 enteredTitle, enteredAmount, enteredDate에 useState를 사용한 객체로 묶고, 이를 사용자가 입력한 userInput이라는 것과 변경될 값의 함수명을 선언해주었다. 그리고 변경될 값이 저장되는 함수 setUserInput에는 스프레드 연산자를 사용하여 기존의 userInput 값을 그대로 복사하도록 하고, enteredTitle은 새로 입력한 .. 2023. 5. 3. 이벤트 핸들링, state의 활용, 양식 추가하여 입력 리스닝하기 리액트에서의 이벤트 핸들링과 state의 활용 오늘은 어제까지 만들어본 연습용 웹페이지를 조금 더 동적으로 바꾸기 위한 작업을 해보았다. 이를 위해 사용자가 클릭했을 때나 입력했을 때 같은 이벤트가 발생했을 때 그것을 핸들링 할 수 있는 방법에 대해 알 수 있었다. 저번에 자바스크립트를 배우면서 이벤트리스너를 추가하기 위해 해당 요소를 자바스크립트와 연결하여 이벤트리스너라는 메서드를 이용하였다. 리액트에서는 이것보다 코드가 훨씬 간결했다. 리액트에서는 on으로 시작하는 이벤트 핸들러를 사용하는데, 위 이미지의 위쪽 코드에서 onClick을 추가하여 사용자가 버튼을 클릭했을 때 이벤트가 발생하도록 하고있다. 그리고 이 이벤트 역시 함수로 구성하는데, 이를 위 이미지의 아래쪽 코드처럼 구성해주었다. 함수 선.. 2023. 5. 2. 사용자 지정 컴포넌트의 컴포지션 활용, JSX의 개념 등 사용자 지정 컴포넌트로 컴포지션(합성)에 활용하기 리액트에서 사용자 지정 컴포넌트란 개발자가 작성한 재사용이 가능한 UI 조각이다. 이는 자바스크립트 함수나 클래스로 작성할 수 있으며, 컴포넌트의 이름은 관례에 따라 대문자로 시작해야 한다. 이 사용자 지정 컴포넌트는 다른 컴포넌트나 HTML의 요소와 함께 사용할 수 있다. 또한 일반적으로 이러한 컴포넌트는 다른 컴포넌트의 내부에 포함되며, 부모 컴포넌트는 자식 컴포넌트에 속성(props)을 통해 데이터를 전달할 수 있다. 이러한 사용자 지정 컴포넌트는 코드의 가독성과 유지보수성을 향상시키며, 코드 재사용성을 높이는 장점도 있다. 위 이미지는 현재 리액트 수업을 진행하며 만들고 있는 연습용 웹페이지에 Card라는 사용자 지정 컴포넌트를 만들고 이를 함수형.. 2023. 5. 1. 더 많은 스타일의 적용, props 파일의 분산과 더 많은 스타일의 적용 오늘은 기존에 한 곳에 모아져 있던 여러 리액트 코드들을 목적에 맞는 파일로 분산시켜서 더 많은 스타일을 적용해보았다. 결과부터 보면 위 이미지와 같다. 저번에 만들어진 모습과는 CSS 스타일만 조금 다를 뿐 많은 것이 바뀌지는 않았지만, 그 때는 모든 게 모아져 있었고 영어였다면, 현재는 분산된 상태의 파일로 이루어져 있고 한글이라는 것이다. 리액트 코드 분석 app.js 파일에는 기존에 있던 길었던 가계부 내용을 ExpenseAmount로 옮기고, 가계부 내용의 자료인 expenses 배열을 남겨놓았다. 또한, 웹페이지에는 가계부 내용이 나오도록 ExpenseAmount 태그를 div 박스 내에 추가해주고 items의 값이 expenses에 있다는 것을 입력해주었.. 2023. 4. 28. React의 설치, 첫 컴포넌트 추가해보기 리액트 설치해보기 리액트는 HTML, CSS, 자바스크립트처럼 바로 사용할 수 있는 것이 아니라 nodeJS를 통해 리액트 관련 패키지를 설치하여 사용해야 한다. 이를 위해 create React App이라는 사이트(https://create-react-app.dev/)에서 설치방법을 따라하면 쉽게 설치할 수 있다. 사전에 nodeJS를 설치해야 하며, 터미널에서 npx create-react-app 명령어를 입력하고 바로 뒤에 리액트를 설치할 폴더명을 적으면 된다. 그럼 설치과정이 진행되며 설치가 되면 npm start 명령어를 입력하여 리액트를 실행할 수 있다. 별다른 프로젝트없이 실행하면 리액트 로고가 돌고있는 localhost:3000 웹페이지가 뜨게 되며, 진행중인 프로젝트가 있다면 해당 프로젝.. 2023. 4. 26. React 심화이론 React 심화이론 리액트는 사용하지 않더라도 어떤 웹사이트든 구축할 수 있다. 필수가 아니라는 뜻이다. 하지만 좀 더 복잡한 사용자 인터페이스가 있는 웹사이트에 리액트를 사용하면 작업이 훨씬 더 수월해지게 된다. 아주 사소한 것들에 신경쓸 필요도 없고 오류도 덜 발생하게 된다. 그래서 개발자는 핵심 로직을 구축하는데 더 집중할 수 있다. 이처럼 작업을 단순하게 하기 위해 리액트는 컴포넌트라는 개념을 받아들였고, 리액트는 컴포넌트가 전부인 것이 되었다. 리액트에서 컴포넌트가 중요한 개념이 된 이유는 모든 사용자 인터페이스들은 결국 컴포넌트로 구성되기 때문이다. 이 컴포넌트는 사용자 인터페이스에서 재사용할 수 있는 빌딩 블록이며, 스타일을 만드는 HTML 코드, CSS 코드, 어떤 로직을 위한 자바스크립트.. 2023. 4. 25. 이전 1 ··· 5 6 7 8 9 다음
