React (18) 썸네일형 리스트형 [React] componentDidUpdate 사용 시점과 무한 루프 렌더링 주의 - 구현 기능 설명 - --------------------------------------------------------------- 버튼 | 번호 | 제목 | 작성자| 조회수| 작성일 | ..... --------------------------------------------------------------- o | 1 | | | | | | | --------------------------------------------------------------- o | 2 | | | | | | | --------------------------------------------------------------- o | 3 | | | | | | | --------------------------------.. React 시작하기 - 09 - textarea, input, select 등 폼 form 태그 다루기 사용자로부터 값을 입력받는 form 태그는 자주 사용한다. textarea, input select 등 여러 태그가 있다. 리액트에서는 이러한 form 태그를 쉽게 다룰 수 있도록 만들어 놓았다. 특히 value 를 번거롭게 다루지 않고 손쉽게 다룰 수 있도록 해 두었다. - 220601 참고자료 - https://ko.reactjs.org/docs/forms.html React 시작하기 - 08 - 리스트 반복문으로 엘리먼트 만들기, key 개념 리스트 안에 있는 요소들을 하나씩 가지고와서 리액트 엘리먼트를 만들 수 있다. 리액트라고 해서 전혀 새로운 문법을 사용하지는 않는다. 우리가 기존에 JavaScript에서 쓰던 작동 방식을 거의 그대로 사용한다. forEach문 같은 느낌이다. 또 반복문을 돌리면서 생성된 리액트 엘리먼트들을 하나하나 식별할 수 있도록 유니크한 값을 만들어 줘야 하는데, 그것이 key다. 아래에서 자세히 알아보자. - 220530 참고자료 - https://ko.reactjs.org/docs/lists-and-keys.html React 시작하기 - 07 - 조건부 렌더링, 조건에 따라 다른 요소 렌더링 특정 값이 조건식에 따라서 엘리먼트를 보여주거나 안 보여줄 수 있다. 또는 이 엘리먼트를 보여주거나 저 엘리먼트를 보여줘야 할 때도 있다. 리액트에서는 이러한 조건부 렌더링을 어떻게 처리할까. - 220529 참고자료 - https://ko.reactjs.org/docs/conditional-rendering.html React 시작하기 - 06 - 이벤트 핸들링하기, this 바인딩 해주기, e 합성 이벤트 리액트에서 엘리먼트를 만들 때 event 처리를 해줄 수 있다. 이는 DOM에서 onclick, onchange 등과 비슷하게 사용할 수 있다. 그러나 다른 점도 몇 가지 있다. 일단 리액트에서 사용하는 e는 합성 이벤트다. DOM의 이벤트 객체와 비슷하지만 조금 다른 부분도 있다. 또한 함수를 부르는 위치에 따라 this 가 위치에 따라 바뀌기 때문에 bind를 따로 해주어야 한다. - 220527 참고자료 - https://ko.reactjs.org/docs/handling-events.html React 시작하기 - 05 - 컴포넌트 안에서 state와 생명 주기 활용하기 리액트 컴포넌트에는 state라는 개념이 있다. 컴포넌트 안에서는 state 값을 공유한다. 또 특정한 생명 주기에 어떤 작업을 수행하도록 만들 수 있다. 예를 들어 리액트 엘리먼트를 생성하고 DOM에 마운트 하기 전에 어떤 함수를 실행하는 것이다. state라는 개념과 생명주기 개념을 활용하여 시간을 출력하는 간단한 기능을 구현해보자. - 220525 참고 자료 - https://ko.reactjs.org/docs/state-and-lifecycle.html React 시작하기 - 04 - 클래스 컴포넌트, 함수 컴포넌트, props 주고받기 React에서는 컴포넌트라는 개념이 있다. 어떤 요소를 미리 만들어두고 여러 번 꺼내서 재사용할 수 있다. 만드는 방법은 클래스로 만드는 방법과 함수로 만드는 방법이 있다. props라는 속성값을 이용하여 컴포넌트 안에서 쓰는 특정 값을 편하게 관리할 수 있다. -------------------root1-------------------------------- -------------------root2-------------------------------- -------------------root3-------------------------------- -------------------root4-------------------------------- -------------------root.. React 시작하기 - 03 - 리액트에서 엘리먼트 다루기와 루트 돔 변화 리액트 엘리먼트는 React 앱을 이루고 있는 가장 작은 단위다. React DOM 은 따로 관리하는데, 기존 DOM 과 비교하여 필요한 부분만 최소한으로 변경할 수 있도록 해준다. 변경해야 하는 부분이 적어질수록 성능은 향상될 것이다. - 220524 참고자료 - https://ko.reactjs.org/docs/rendering-elements.html 이전 1 2 3 다음