목록[ javascript ]/react (59)
IT_susu
react. 16.8버전부터 hook을 지원하기 시작했습니다. hook은 함수형의 상태 관리 지원이며, class에서만 가능했던 state, lifecycle API 사용을 가능하게 해줍니다. 하위호완성을 갖고 있기 때문에 기존 코드를 굳이 바꾸지 않아도 됩니다. 병행해서 사용이 가능합니다. 그럼 난데없이 튀어나온 것 같은 hook은 얼마나 많이 바뀐거야? 하며 머리를 감쌀 수도 있습니다만, 그동안 함수형에서 불가능했던 것들이 가능해진 부분만 새로 공부한다고 생각하시면 됩니다. 아예 새롭게 뭐가 나오는 것은 아니라는 거죠. 겁먹지말고 하나씩 알아봅시다! hook으로 인한 변화들. - 이젠 지나간 사실이 된 내용들 클래스는 함수형보다 더 많은 기능을 제공한다. 함수형 컴포넌트가 클래스 컴포넌트보다 성능이 ..
리액트 위주로 설명. 내가 생각할 때 리액트가 생겨남으로 인해 가장 큰 변화는 기존 프론트엔드개발의 단위를 바꾸었다는 점이다. 기존에는 페이지 단위로 개발을 진행했었고, 페이지를 기준으로 코드의 유효성을 생각할 수 있었다. 그런데 리액트는 컴포넌트를 기준으로 프로그램을 생각한다. 유효성은 컴포넌트에 한정될 수도, 전역적일 수도 있다. 이는 하나만 생각하면 되던 것이 다방면으로 생각할 것이 늘어난 것과도 같다. 그 페이지 내에서의 동작만 신경쓰다가, 이 컴포넌트가 어디에 쓰여도 잘 융화될 수 있도록 코드를 짜야 한다. 어찌보면 유지보수의 실력은 많이 늘 것 같다. 기존의 한계를 뛰어넘게 하기 위해 제이쿼리만 쓰던 시대보다는 많은 것을 새로 알아야 한다. 아직은 js의 최신 문법을 브라우저가 따라오지 못하기..
react 공식문서 메인컨셉 12. react로 생각하기 1. UI를 컴포넌트 계층으로 분해하기 디자인 파일 위에 모든 컴포넌트를 박스칠하고 이름을 지어줍니다. 컴포넌트를 결정하는 방법은 하나의 컴포넌트는 한가지 일만 하는 것을 원칙으로 나누는 것입니다. 나는 컴포넌트들을 계층으로(트리) 나타내봅시다. 2. 정적인 버전의 react 만들기 상호작용이 없는 (값의 변화라던가 state같은) 버전을 먼저 만듭니다. 생각은 적고 타이핑이 많은 부분이며 쉽기 때문입니다. 이 단계에서는 props는 사용하되, state를 사용하지 않습니다. 컴포넌트를 구성하는 것은 위아래 방식과 아래위 방식이 있습니다. 큰 프로젝트는 위아래가 더 쉽고, 작은 프로젝트는 아래위가 더 쉽습니다. 3. ui의 상호작용에 필요한 최소한..
react 공식문서 메인컨셉 10. state들어올리기 1. state 들어올리기란? 여러개의 컴포넌트가 동일한 바뀌는 데이터를 공유해야 할 때, 가장 가까운 부모컴포넌트에게 state를 올려 state값을 공유하는 것. 2. 방법 하위 컴포넌트에 각각 존재하던 state값들을 부모에게 받는 props 값으로 바꾸고 부모 컴포넌트에서 state를 계산하여 하위 컴포넌트들에게 값을 넘겨줍니다.
react 공식문서 메인컨셉 11. 합성과 상속 1. react에서 합성이란? 자식 컴포넌트가 무엇이 들어올 지 알지 못하는 상황에서 만들어야 할 때, 두 컴포넌트가 서로 영향을 끼치지 않으면서 합쳐지는 것. 2. 사용방법 1) 한 곳만 합성할 경우 See the Pen ZNzMEq by sujeong91 (@sujeong91) on CodePen. 2) 여러 곳을 합성할 경우 See the Pen JqPaog by sujeong91 (@sujeong91) on CodePen. 3. 사용 예 1) 팝업 컴포넌트 2) 레이아웃 컴포넌트
react.js 공식문서 MainConcept 9. form 발췌 리엑트에 의해 값이 제어 가능한 컴포넌트를 제어 컴포넌트라고 합니다. 리액트가 관리한다는 말 부터가 이미... 일반 html과 다르다는 것이겠죠? [1] input state에 value값 자리를 마련해놓고, input name은 DB key값으로, value는 state와 연동시켜놓습니다. [2] textarea 원래 textarea는 텍스트를 자식 컴포넌트로 받지만 react에서는 value 속성을 사용합니다. [3] select 더 다양하고 다이나믹한 요구를 수용하려면 플러그인을 권장. [4] file ref를 사용해서 files에 있는 내용 활용 * 다중 입력 제어 computed property name을 이용하여 여러 폼요소들을..
react.js 공식문서 MainConcept 8. 리스트와 key 1. 리스트란? 배열을 엘리먼트로 반복해서 출력한 결과물을 말합니다. 2. 사용하는 이유 반복적인 컴포넌트 및 값을 호출할 때 편리합니다. (반복문을 사용하는 이유와 같은..) 3. 사용방법 1) map을 이용하여 배열 반복 실행 See the Pen List of Numbers With Index by sujeong91 (@sujeong91) on CodePen. 4. 적용 1) 리스트 여러개 호출 * key 1. key란? 엘리먼트 리스트를 만들때 포함해야하는 특수한 문자열 속성. 2. 사용하는 이유 Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하하기 ..
react.js 공식문서 MainConcept 7. 조건부 렌더링 1. 조건부 렌더링이란? 조건에 따라서 렌더링 여부를 결정하거나, 렌더링 할 요소를 선택하는 것입니다. 공식문서에서는 컴포넌트를 조건에 따라 렌더링 하는 것을 다루었으나, 꼭 컴포넌트가 아니더라도 class명이나 분기가 필요한 곳 어디서든 사용이 가능합니다. 2. 사용하는 이유 애플리케이션 상태에 따라 원하는 컴포넌트만을 렌더링할 수 있어 컴포넌트 관리 및 상태관리가 더욱 편리해집니다. 3. 사용방법 1) jsx안에서 삼항연산자 사용 See the Pen Conditional Rendering Example by sujeong91 (@sujeong91) on CodePen. 2) jsx안에서 논리연산자 사용 See the Pen Inlin..
Wrapping Up 마무리 Congratulations! You’ve created a tic-tac-toe game that: 축하해! 틱택토 게임을 만들었어. Lets you play tic-tac-toe, Indicates when a player has won the game, Stores a game’s history as a game progresses, Allows players to review a game’s history and see previous versions of a game’s board. 틱택토 게임을 해봐 그 게임에서 선수가 이겼을 때 나타낸다. 게임의 역사를 게임의 과정으로 저장하고. 선수가 게임의 기록을 검토할 수 있고, 게임판의 이전 버전을 볼 수 있다. Nice ..
Implementing Time Travel 시간 여행 구현하기 In the tic-tac-toe game’s history, each past move has a unique ID associated with it: it’s the sequential number of the move. The moves are never re-ordered, deleted, or inserted in the middle, so it’s safe to use the move index as a key. 틱택토 게임 기록에서, 각각의 과거 move들은 특별한 ID를 가지고 있다. 그것과 연계된: 그것은 move의 연속된 숫자입니다. moves는 절대 재정렬되거나 삭제되거나 중간에 삽입되지 않으므로 키로 move의 inde..