본문 바로가기
반응형

3. 웹개발/3_2_4 React12

[React] 7. React hooks[3] - useReducer란? 7. React hooks[3] - useReducer란? 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React hook 중 useReducer에 대한 내용 ] 입니다. : ) https://ko.reactjs.org/docs/hooks-effect.html 1. useReducer 훅이란? - useState를 대체할 수 있는 함수이다. - React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 state이다. - 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용할 수 있다. ( 콜백대신 dispatch를 전달할 수 있기 때문이라고 볼 수 있는데, 이 부분은 이후 확인해 보자. ) - reducer는 이전 상태와 Action을 합쳐, 새로운 state를 만드는 .. 2022. 5. 17.
[React] 7. React hooks[2] - useEffect란? 7. React hooks[2] - useEffect란? 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React hook 중 useEffect에 대한 내용 ] 입니다. : ) https://ko.reactjs.org/docs/hooks-effect.html 1. useEffect 훅이란? - 컴포넌트가 렌더링 될 때 특정 작업을 실행할 수 있도록 하는 Hook이다. - 리액트의 useEffect 훅을 사용하면 함수 컴포넌트에서도 side effect를 사용할 수 있다. 1) 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었다. 2) 즉, 라이프사이클 훅을 대체할 수 있게 되었다. (componentDidMount, componentDidUpd.. 2022. 3. 6.
[React] 6. React Router (리액트 라우터) 사용하기 6. [React] 6. React Router (리액트 라우터) 사용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에서 페이지 이동 처리 하는 방법 ] 입니다. : ) 우리가 흔히 말하는 "페이지 이동"이라는 기능을 리액트에서는 리액트 라우터를 통해 처리할 수 있다. 라우팅이 무엇인지 간단하게 살펴보자. 1. 라우팅이란? - 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다. - 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 한다. ※ SPA, SSR, SSG 등의 대한 개념을 어느정도 갖춘 상태에서 다음 내용을 진행하는것을 추천 한다. 리액트는.. 2022. 2. 2.
[React] 4. React 컴포넌트(5) - map() 반복문, 배열 컴포넌트 4. React 컴포넌트(5) - map() 반복문, 배열 컴포넌트 사용하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 반복문 사용하기 ] 입니다. : ) https://ko.reactjs.org/docs/lists-and-keys.html 0. 들어가기 앞서 - 어떨때 map 함수를 쓰면 좋을까? 앞으로 알아가겠지만 for문, 반복문을 대체하여 사용한다면 아주 유용하다. 간단히 형태 살펴보고 자세히 알아보도록 하자. ex) for문 const numbers = [1, 3, 5] for (let i = 0; i < numbers.length; i++) { console.log(numbers[i]) } ex) map() const numbers = [1, 3, 5]; const listIte.. 2022. 2. 1.
[React] 4. React 컴포넌트(4) - 이벤트 처리 방법 4. React 컴포넌트(4) - 이벤트 처리 방법 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React에서 이벤트 handling 하는 방법 ] 입니다. : ) 1. 컴포넌트에서 DOM 이벤트 사용 - 컴포넌트에서 출력된 특정 DOM 객체에 이벤트 컴포넌트가 동작하기 위해선 DOM이벤트 프로퍼티를 사용해야 한다. - 우리가 흔히 쓰고 있는 HTML 엘리먼트의 이벤트들은 JSX내에서 'on + 이벤트명' 형태의 프로퍼티로 제공된다. ex) 프로퍼티 샘플 이벤트 명 JSX DOM 이벤트 프로퍼티 이벤트 호출 시점 click onClick 엘리먼트에 마우스나 키보드가 클릭 된 경우 change onChange 엘리먼트의 내용이 변경된 경우 submit onSubmit 폼의 데이터가 전송될 때 keydow.. 2022. 2. 1.
[React] 4. React 컴포넌트(3) - State 알아보기(React Hooks 사용) 4. React 컴포넌트(3) - State 관리 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 컴포넌트 내용 중 State에 대한 내용 ] 입니다. : ) https://ko.reactjs.org/docs/state-and-lifecycle.html https://reactjs.org/docs/hooks-reference.html#usestate 1. state란? - 일반적으로 컴포넌트의 내부에서 변경 가능한 데이터를 관리해야할 때에 사용 한다. - 프로퍼티(props)의 특징은 컴포넌트 내부에서 값을 바꿀 수 없다는 것이었다. 하지만 값을 바꿔야 하는 경우도 분명 존재하며, 이럴때 state라는 것을 사용한다. - 값을 저장하거나 변경할 수 있는 객체로 보통 이벤트와 함께 사용된다. - .. 2022. 1. 14.
[React] 4. React 컴포넌트(2) - 프로퍼티(props)란? 4. React 컴포넌트(2) - 프로퍼티(props)란? 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 컴포넌트 내용 중 프로퍼티(props)에 대한 내용 ] 입니다. : ) 간단??? 하게 프로퍼티의 사용 방법을 알아 보자. https://ko.reactjs.org/docs/components-and-props.html 1. 프로퍼티(props)란? - 프로퍼티, props(properties의 줄임말) 라고 한다. - 상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용한다.(단방향 데이터 흐름 갖는다.) - 프로퍼티는 수정할 수 없다는 특징이 있다.(자식입장에선 읽기 전용인 데이터이다.) 2. 사용방법? - 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때.. 2021. 12. 24.
[React] 4. React 컴포넌트(1) - 컴포넌트란? 4. React 컴포넌트(1) - 컴포넌트란? 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 컴포넌트에 대한 기본 내용 ] 입니다. : ) 리액트 공식 문서, 자습서에서 함수형 컴포넌트, 클래스형 컴포넌트라는 내용을 간단하게 알아보려고 한다.. 리액트의 꽃이라고 할 수 있고, 리액트로 작성된 화면은 컴포넌트로 구성되어있기 때문에 매우 중요하다. 리액트의 꽃이라 불릴 정도로 리액트에서 가장 중요한 요소이다. 일단 최대한 기본 개념만 살펴볼 수 있도록 하자. https://ko.reactjs.org/docs/components-and-props.html 1. 리액트 컴포넌트(Component)란? - 리액트로 만들어진 앱을 이루는 최소한의 단위 - 기존의 웹 프레임워크는 MVC방식으로 분리하여 관.. 2021. 12. 23.
[React] 3. React 엘리먼트 렌더링 3. React 엘리먼트 렌더링 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ React 엘리먼트 렌더링 (Component 이해 전 읽어보기) ] 입니다. : ) 리액트 공식 문서, 자습서에서는 컴포넌트를 알아보기 앞서 엘리먼트 렌더링이라는 내용을 기술하고 있어, 이부분도 가볍게 살펴 보고 가려고 한다. 이번장은 거의 공식문서의 내용이 다이니, 해당 문서를 참고하는것도 좋을 것 같다. https://ko.reactjs.org/docs/rendering-elements.html 1. 엘리먼트란? - 리액트에서의 가장 작은 단위 이다. - 화면에 표시할 내용을 기술 한다. ex) 엘리먼트 예시 const element = hello, GodDaeHee!~; - 위의 예시에서 보듯, 우리가 예전에 사용하던 .. 2021. 12. 6.
[React] 2. JSX란? (정의, 장점, 문법) 2. JSX란? (정의, 장점, 문법) 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ [React 에서 사용하는 JSX ] 입니다. : ) 이번엔 React에서 자주 사용하게될 JSX에 대해 알아보도록 하자. 1. JSX란? - JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. - 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. ex) // 실제 작성할 JSX 예시 function App() { return ( Hello, GodDaeHee! ); } // 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다. func.. 2021. 12. 3.
[React] 1. React 시작하기(2) - React의 주요 특징 1. React 시작하기(2) 리액트의 주요 특징 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ [React의 주요 특징 ] 입니다. : ) 실전으로 들어가기 앞서 리액트의 가장 큰 특징을 알아보고 넘어 가려 한다. 1. 리액트(React)란? - React는 자바스크립트 라이브러리로 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는데 사용된다. - 웹, 모바일 앱 등의 view layer를 처리하는 데 사용된다. - 페이지를 다시 로드하지 않고 데이터를 변경할 수 있도록 가상 돔(Virtual DOM)을 사용하여 웹 애플리케이션의 퍼포먼스를 최적화한 라이브러리이다. 2. 리액트의 특징 1. 컴포넌트(Component) - 리액트는 컴포넌트 기반의 라이브러리이다. -.. 2021. 11. 29.
[React] 1. React 시작하기(1) - 환경 설정 [React] 1. React 시작하기 안녕하세요. 갓대희 입니다. 이번 포스팅은 [ [React 시작 하기 ] 입니다. : ) 0. 프론트 프레임워크 선택에 대한 고찰 - React를 시작하기 앞서, 왜 리액트를 공부하기로 생각했었는지에 대해 간단히 작성 해두려 한다. - 이 부분도 상당히 길다보니, 무시하고 바로 환경 설정부터 보시려면 > [클릭] 1. 프론트 개발 언어의 변화 - 내가 알고있는 범위 한정이겠지만, 프론트 만큼 변화가 빠른 언어, 프레임워크는 없는 듯 싶다. - 데충 스쳐 지나갔던, 프론트 관련 키워드만 모아봐도 하기 예시 정도가 된다. ex) jsp, jquery, mustache, jstl, velocity, Freemarker, vanilla js, vue.js, react - .. 2021. 9. 27.
반응형