IT_susu

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..

Picking a Key 키 선택하기 When we render a list, React stores some information about each rendered list item. When we update a list, React needs to determine what has changed. We could have added, removed, re-arranged, or updated the list’s items. 리스트를 렌더할 때, 리액트는 리스트 아이템을 렌더링한 정보들을 저장한다. 리스트를 업데이트 할 때, 리액트는 무엇이 바뀌었는지 결정할 필요가 잇다. 우리는 리스트의 항목들을 추가하거나 삭제하거나 재배열하거나 업데이트 할 수 있다. Imagine transitioning fro..

Showing the Past Moves 과거 행적 보기 Since we are recording the tic-tac-toe game’s history, we can now display it to the player as a list of past moves. 우리가 틱택토 게임의 기록을 기록했기 때문에, 우리는 보여줄 수 있다. 선수의 과거 행적을 리스트로. We learned earlier that React elements are first-class JavaScript objects; we can pass them around in our applications. To render multiple items in React, we can use an array of React elements...

Lifting State Up, Again 다시 state를 올리자. We’ll want the top-level Game component to display a list of past moves. It will need access to the history to do that, so we will place the history state in the top-level Game component. 우리는 상위 레벨 game 컴포넌트를 원한다. 과거 동작 리스트를 보여주기 위해서. 그렇게 하기 위해서는 기록에 접근할 필요가 있다. 그래서 우리는 상위레벨인 game 컴포넌트에 history state를 놓을 것이다. Placing the history state into the Game componen..

As a final exercise, let’s make it possible to “go back in time” to the previous moves in the game. 마지막 연습으로, 게임의 이전 동작에 대해 시간을 되돌리는 것을 해보자. Storing a History of Moves 동작 기록 저장 If we mutated the squares array, implementing time travel would be very difficult. 만약 squares 배열을 바꾼다면, 시간여행을 하는 것은 매우 어려울 것이다. However, we used slice() to create a new copy of the squares array after every move, and trea..

Declaring a Winner 승자 선언 Now that we show which player’s turn is next, we should also show when the game is won and there are no more turns to make. Copy this helper function and paste it at the end of the file: 이제 다음 차례 선수를 보여주었다면, 우리는 게임에서 이겼을 때 더이상 턴이 돌아가지 않도록 해야한다. helper 함수를 복사해서 파일의 끝부분에 붙여라. Given an array of 9 squares, this function will check for a winner and return 'X', 'O', or null as..