본문 바로가기

React128

React(37) 리액트 훅 - 토글버튼 + 체크박스 구현하기 리액트 훅으로 영단어 프로그램을 구현하는 중이다. 오늘 실습해볼 내용들은 토글 버튼과 체크박스를 구현하는 것이다. 토글 기능으로 '뜻보기' 라는 버튼을 누르면 단어의 뜻이 나오고, '뜻숨기기' 라는 버튼을 누르면 단어가 감춰진다. 또한 체크박스 기능으로 다 외운 영단어를 체크박스에 표시하면 그 단어가 비활성화 된다. 스포일러 1. 토글버튼 구현 '뜻 보기' 버튼을 누르면 pencil 의 뜻인 '연필' 이 나오고 '뜻 숨기기' 버튼을 누르면 뜻이 감춰진다. 2. 체크박스 구현 외운 단어에 체크하면 단어가 비활성화 된다. **토글이란 하나의 설정 값으로부터 다른 값으로 전환하는 것이다. 토글이라는 용어는 오직 두 가지 상태 밖에 없는 상황에서, 스위치를 한번 누르면 한 값이 되고, 다시 한번 누르면 다른 값.. 2021. 8. 19.
React(36) 리액트 훅 - 동적라우팅으로 페이지 이동 리액트를 사용하여 다이나믹 라우팅(Dynamic Routing) 을 구현하여 페이지를 동적으로 이동해보자. 스포일러 Day1 이라는 버튼을 클릭하면 상세페이지로 이동한다. 이때 url 을 살펴보면 day/1로 변한다. (Day2 를 누르면 day/2 로 변할 것이다.) React(36) 리액트 훅 - 동적라우팅으로 페이지 이동 라우터 설치하기 터미널에 아래 명령어로 리액트 라우터를 설치하기 npm install react-router-dom 컴포넌트 구조 - component 안에는 Days.js / DayList.js / Header.js 컴포넌트들이 들어있다. - db 안에는 data.json 이라는 객체 데이터가 들어있다. ( api역할 ) - App.js 는 최상위 컴포넌트이다. App.js 여기.. 2021. 8. 17.
React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기 자, 리액트로 데이터를 이리저리 굴려보자. 원래는 백엔드에서 api 형태로 통신을 거쳐 json 객체 데이터를 받아온다. 하지만 지금은 DB 에서 받아올 수 없으므로 데이터가 담긴 json 객체 파일을 프로젝트 내에 하나 만들고, map() 함수를 이용하여 그 데이터 뭉텅이들 중에 필요한 데이터만 꺼내서 컴포넌트 곳곳에 사용해볼 것이다. 스포일러 토익 단어장을 만들고 있다. 날짜별 외워야할 영단어를 출력해주고 싶다. 1차로 json 객체 데이터를 콘솔창에 출력하였다. 여기서 필요한 데이터들만 추려서 2차로 화면에 출력할 것이다. (여기서 days 는 날짜를 의미하고 words 는 날짜별로 암기할 영단어 목록이다.) React(35) 리액트 훅 - map 으로 json 객체 데이터 가져오기 파일구조 먼저 .. 2021. 8. 14.
React(34) 리액트 훅 - 부모가 자식에게 props 전달하기 사람이 커뮤니케이션을 할 때, 정보를 말이나 문자로 주고 받는다. 그 정보를 바탕으로 행동을 하여 결과를 만든다. 컴퓨터로 커뮤니케이션을 할 때도 마찬가지이다. 정보를 컴퓨터 언어로 데이터 형태로 넘기고 받는다. 그리고 결과를 다양한 방식으로 출력한다. 그래서 내가 느낀 소프트웨어 프로그래밍의 핵심은 데이터를 어떻게 가공해서 전달하느냐 인 것 같다. 프로그램을 만들다 보면 느끼겠지만 데이터를 넘기고 받는 과정이 항상 필요하다. 그래서 정보처리기사 자격증 자체도 '정보처리' 라는 단어를 쓰는 것이 아닐까 싶다. React(33) 리액트 훅 - 부모가 자식에게 props 데이터 전달하기 리액트에서도 마찬가지이다. 데이터를 부모컴포넌트에게서 물려받는 방법을 알아보자. 준비물은 props 라는 속성이다. 부모컴.. 2021. 8. 13.
React(33) 리액트 훅 - useState 기본구조 리액트 훅에서 useState 의 기본 구조를 살펴보자. 나에게는 이번 포스팅까지 포함하면 리액트 세번째 복습이다. 똑같은 내용 공부해서 별다를 것 없을 수도 있지만, 나한테는 반복적인 공부를 통해 변수와 같은 단편적인 개념에서 전체적인 패턴이나 구조와 같은 포괄적인 개념까지 시야가 넓어지는 것을 경험하고 있다. 혹시 useState 에 대한 개념을 이해하게 된 지난 포스팅이 궁금하시다면 ↓아래를 클릭해주세요. React(24) 리액트 훅 useState란 Updated 2021/05/06 React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다. 내가 이해한 상태값? (더보기클릭) devbirdfeet.tisto.. 2021. 8. 12.
React (32) 리액트 훅 - 함수형 컴포넌트 기본구조 Updated 09/14/21 처음에 리액트를 클래스형 컴포넌트 위주로만 배웠기 때문에 프로젝트를 하면서 나중에 리액트 훅을 쓰면서 함수형 컴포넌트를 알게 되었다. mini size 함수만 사용해봤던 나에게 컴포넌트화된 거대 함수(?)의 존재는 쉽게 와닿지 않았다. (마치 개미더러 지구를 보라면 너무 커서 보이지 않듯...) 하지만 여러 프로젝트를 경험해보며 이해의 폭이 생긴 것 같아 다시 정리해본다. React (32) 리액트 훅 - 함수형 컴포넌트 기본구조 함수형 컴포넌트 export default function Hello () { 함수 안에 컴포넌트 내용이 몽땅 들어가 있어 어디서든 이 함수덩어리만 호출하면 달려가 사용할 수 있다. 훨씬 짧고 직관적인 코드를 짤 수 있다. React Hook 을 .. 2021. 8. 10.
React(31) Redux 패턴 action-reducer-store-view 지난 포스팅에서는 Redux 의 개념을 심플하게 알아보았다. 이번 포스팅에서는 예제를 통해 몸소 느껴보자 React(30) Redux 란 Redux 란 리덕스 는 React 의 상태관리 라이브러리이다. 즉, 데이터를 더욱 쉽게 이쪽저쪽으로 보내주고 관리도 해주는 도우미이다. React 는 View 만을 책임지는 라이브러리이기 때문에 데이터를 어 devbirdfeet.tistory.com React(31) Redux 패턴 action-reducer-store-view Redux 의 동작 방식 변화가 일어나면 Action(type에 대한 정보를 가진 객체)을 만들고, → (각 액션에 맞게 미리 정의해 둔) Reducer가 새로운 상태를 만들어 → store를 업데이트 한다. store를 (connect()로.. 2021. 5. 15.
React(30) Redux 란 Redux 란 리덕스 는 React 의 상태관리 라이브러리이다. 즉, 데이터를 더욱 쉽게 이쪽저쪽으로 보내주고 관리도 해주는 도우미이다. React 는 View 만을 책임지는 라이브러리이기 때문에 데이터를 어떻게 관리할 것인가 고민을 하다가 redux 가 나왔다. 컴포넌트의 props와 state 만으로 상태를 관리하기엔 우리가 만드는 앱은 너무 복잡하기 때문이다. Redux 의 동작 방식 변화가 일어나면 Action(type에 대한 정보를 가진 객체)을 만들고, → (각 액션에 맞게 미리 정의해 둔) Reducer가 새로운 상태를 만들어 → store를 업데이트 한다. store를 (connect()로) 구독하고 있는 → 컴포넌트(View)에 상태변화가 적용된다. 액션 생성자(action creator.. 2021. 5. 14.
React(29) 리액트 훅 useReducer 란 useReducer 란? useReducer 함수는 간단히 말해 리액트에서 상태변화를 업데이트 해주는 함수이다. const [state, dispatch] = useReducer(reducer, 초기값, 초기 함수) useReducer 함수를 사용하려면 + state 와 + dispatch() 함수 + reducer() 함수가 필요하다. reducer() 함수를 사용하려면 + state 와 action 이 필요하다. ** dispatch({ 는 action 오브젝트 내용 }) 을 넣는다. 그러면 reducer 가 동작하여 action 을 받아 상태(state)를 변경해준다. ** reducer(는 현재 state와, action) 을 인자로 받아 => 새로운 상태(state) 를 반환 하는 함수이다. *.. 2021. 5. 13.
반응형

티스토리툴바