본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 15. 배열에 항목 수정하기 이번에는, 배열 항목을 수정하는 방법을 알아보자. User 컴포넌트에 계정명을 클릭했을때 색상이 초록색으로 바뀌고, 다시 누르면 검정색으로 바뀌도록 구현을 해보자. 우선, App 컴포넌트의 users 배열 안의 객체 안에 ...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 14. 배열에 항목 제거하기 이번에는 배열에 항목을 제거 할 때 어떻게 해야 하는지 알아보자. 우선, UserList 에서 각 User 컴포넌트를 보여줄 때, 삭제 버튼을 렌더링해주겠다. UserList.js import React from ...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 13. 배열에 항목 추가하기 이번에는 배열에 새로운 항목을 추가하는 방법을 알아보자. 우선, input 두개와 button 하나로 이루어진 CreateUser.js 라는 컴포넌트를 src 디렉터리에 만들어보자. CreateUser.js imp...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 12. useRef 로 컴포넌트 안의 변수 만들기 컴포넌트에서 특정 DOM 을 선택해야 할 때, ref 를 사용해야 한다고 배웠었다. 그리고, 함수형 컴포넌트에서 이를 설정 할 때 useRef() 훅을 사용하여 설정한다고 배웠었다. useRef() Ho...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 11. 배열 렌더링하기 이번에는 리액트에서 배열을 렌더링하는 방법을 알아보자. 아래와 같은 배열이 있다고 가정해보자. const users = [ { id: 1, username: 'velopert', email: 'publi...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 10. useRef 로 특정 DOM 선택하기 JavaScript 를 사용 할 때 우리가 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 리액트를...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 9. 여러개의 input 상태 관리하기 input 이 여러개일때는 어떻게 관리해야 하는지 알아보자. 우선 지난번에 만든 InputSample 에서 새로운 input 을 추가해보자. 이번에는 input 이 비어져있을때 인풋에 대한 설명을 보여주는 pla...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 8. input 상태 관리하기 이번에는 리액트에서 사용자가 입력 할 수 있는 input 태그의 상태를 관리하는 방법을 알아보자. 우선, src 디렉터리에 InputSample 컴포넌트를 생성 후 App 컴포넌트에서 렌더링해보자. InputSamp...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 7. useState 를 통해 컴포넌트에서 바뀌는 값 관리하기 지금까지는 리액트 컴포넌트를 만들 때 동적인 부분이 하나도 없었다. 즉 값이 바뀌는 일이 없었다. 이번에는 컴포넌트에서 보여줘야 하는 내용이 사용자 인터랙션에 따라 바뀌어야 할 때 어떻게 구현...

본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다. 6. 조건부 렌더링 조건부 렌더링이란, 특정 조건에 따라 다른 결괌루을 렌더링하는 것을 의미한다. 예를 들어서, App 컴포넌트에서 Hello 컴포넌트를 사용 할 때, isSpecial 이라는 props 를 설정해보자. import React from...