전체 글 (530) 썸네일형 리스트형 [Fast Campus , React] 12. TicTacToe 앱 만들기 (6) JSX key , jumpTo함수 JSX key 속성 리액트에서 요소의 리스트를 나열할때는 key를 넣어야한다. React가 변경,추가,제거된 항목 식별하는데 도움이 된다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 한다. 리액트는 가상돔을 이용해서 바뀐 부분만 실제 돔에 적용 key를 이용해서 어떠한 부분이 바뀌었는지 인식할 수 있다. key에는 유니크한 값을 넣어준다. (index는 비추천) 만약 리스트가 추가되거나 제거되면 해당 리스트의 key값도 바뀔수 있기 JumpTo 함수 작성 현재 몇 번째 스텝이지 알수있는 state 생성하기. 이전으로 되돌아갔을때 그 step을 기억하기 위해 const [stepNumber, setStepNumber] = useState(0); stepNumber를 업데이트위해 j.. [Fast Campus , React] 11. TicTacToe 앱 만들기 (6) history 저장, 전개연산자(spread operator) 동작에 대한 기록 저장 slice()를 사용해 매 동작 이후에 squares 배열의 새로운 복사본을 만들었고 이를 불변 객체로 취급했음. 이를 통해 과거의 squares배열의 모든 버전을 저장하고 이미 지나간 차례를 탐색할 수 있다. const handleClick = (i) => { const newSquares = squares.slice(); // slice로 통째 복사 과거의 squares 배열들을 history라는 다른 배열에 저장할 것이며, history배열은 첫 동작부터 마지막 동작까지 모든 게임판의 상태를 아래같이 표현. 이전 동작에 대한 리스트를 보여주려면 최상위 단계의 App 컴포넌트가 필요. App 컴포넌트에 history state를 이동. state를 App컴포넌트로 이동 cons.. [Fast Campus , React] 10. TicTacToe 앱 만들기 (5) 순서 체크 및 O,X 교체 표시 / 승자 결정 / 다시 두기 방지 플레이어의 순서 체크 컴포넌트에 초기 state를 수정하는 것으로 기본값을 설정할 수 있다. Board.js - 플레이어가 수를 둘 때마다 다음 플레이어가 누군지 결정하는 state를 저장 위해서 그리고, 두는 순서에 따른 표시 [ X , O ] 교체를 위한 수 const [xIsNext, setXIsNext] = useState(true); const handleClick = (i) => { const newSquares = squares.slice(); // slice로 통째 복사 newSquares[i] = xIsNext ? "X" : "O"; setSquares(newSquares); setXIsNext(current => !current); 삼항연산자 사용해서, 중첩 if를 쓰지 않고, 한 줄에.. [Fast Campus , React] 9. React Hooks, functional 컴포넌트 사용하기 React Hooks? ReactConf 2018에서 발표된, class 없이 state를 사용할 수 있는 새로운 기능. class component로 사용되어온 react에서 느껴온 불편함을 해결하기 위해 개발. React Hooks는 Functional Component를 사용함. 함수형 컴포넌트에선 어떤 기능을 못 쓰는가? 중요한 생명주기를 함수형 컴포넌트에선 사용을 못 했다. → 이것은 React 16.8 Hooks 업데이트로 변경됨 이로 인해 함수형 컴포넌트도 생명주기를 사용할 수 있기에 데이터를 가져오고, 컴포넌트 시작하자 API호출 등 많은 부분을 할 수 있게 되었다. 컴포넌트에서 생명주기를 사용하는 부분 class component에서 사용하던, componentDidMount, Compo.. [Fast Campus , React] 8. TicTacToe 앱 만들기 (4) 이벤트 변화, 불변성 (stack, heap 메모리) 이벤트 변화 무언가를 "기억하게" 만들어 "뭔가 (X)"를 표시하려 한다. 이때 component는 state를 사용하게 된다 Square클릭할 때, 호출할 함수생성 (Board.js) handleClick(i) { const square = this.state.squares.slice(); // slice로 통째 복사 squares[i] = 'X'; this.setState({squares: squares}); } Array.prototype.slice() 어떤 배열의 begin부터 end까지 (end미포함)에 대한 얕은 복사본을 새로운 배열객체로 반환. 원본배열은 바뀌지 않는다. 위에서 만든 함수를 props로 Square컴포넌트에 전달 ( Board.js) renderSquare(i) { retur.. [Fast Campus , React] 7. TicTacToe 앱 만들기 (3) - super / props & state 자바스크립트에서 super 자식 클래스 내에서 부모 클래스의 생성자를 호출할 때 사용된다 자식클래스 내에서 부모클래스의 메서드를 호출할 때 사용된다. super([인자값]); // 부모 생성자 호출 super.functionOnParent([인자값]); super이후에 this 키워드 생성자에선 super키워드 하나만 사용되거나, this키워드가 사용되기 전에 호출되어야 한다 super이후에 this가 나와야 하는 이유 부모클래스의 생성자를 호출하기 전 this. 변숫값을 사용하려 하면 문제 발생 React에서 this.state를 생성자에서 정의할 때 super가 먼저 와야 하는 것도 같은 이유 React에서 super에 props를 인자로 전달해야 하는 이유 React.Component객체가 생성될 .. [Fast Campus , React] 6. TicTacToe 앱 만들기 (2) - props, state Pros를 통해 컴포넌트 간에 데이터를 전달하기 Props : Properties의 줄임말 Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데이터 등을 전달하는 방법 읽기 전용 (immutable)으로 자녀 컴포넌트 입장에선 변하지 않는다 (변하게 하고자 하면 부모 컴포넌트에서 state를 변경시켜줘야 한다 1. 상위 컴포넌트가 임의이 이름으로 (여기선 value) props 설정하고 하위 컴포넌트에 값 설정 export default class Board extends Component { renderSquare(i) { return } render() { const status = "Next Player: X"; return ( {status} {this.renderSquare(0)} {th.. [Fast Campus , React] 5. JSX , TicTacToe 앱 만들기 (1) JSX (Javascript Syntax Extension) 자바스크립트 확장 문법 리액트에서는 이 JSX를 이용해서 UI가 보이는 모습을 표현해 준다. JSX를 이용하면 UI를 나타낼 때 자바스크립트(logic)와 HTML구조(markup)를 같이 사용할 수 있기 때문에 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 쉽게 구현할 수 있다 JSX 사용이 의무는 아니지만, 자바스크립트 안에서 UI 작업을 하는데 편리하기에 리액트를 사용할 때는 거의 모든 사람들이 JSX를 사용한다. 원래 리엑트에서 화면을 그리는 방식 React.createElement API를 사용해 엘리먼트를 생성한 후 이 엘리먼트를 In-Memory에 저장. 그리고 ReactDom.render 함수를 사용해서 실제 브.. [Fast Campus , React] 4. SPA React 파일 렌더링 순서 현재 App.js 파일의 소스코드를 변경하면 변경한 부분이 화면에 적용이 된다. 이게 어떤 순서대로 실행되고 있는지 봐보면, public/index.html HTML 템플릿파일. root를 div로 선언해 놓음 You need to enable JavaScript to run this app. 웹브라우저의 렌더링 소스 (html)를 보면 root가 App의 내용이 추가되어 있음 src/index.js 자바스크립트 시작점. 여기서 위에 root id를 가진 div 엘리먼트를 잡아주며, 그 엘리먼트 안에서 화면을 꾸밀 수 있게 된다 onst root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); M.. [Fast Campus , React] 3. 프로젝트 설치와 구조 원래 리액트 앱 설치 위해서 필요했던 것들. Webpack? 오픈소스 자바스크립트 모듈 번들러. 여러 개로 나뉘어 있는 파일들을 하나의 자바스크립트 코드로 압축, 최적화하는 라이브러리 Babel? 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위해서, 최신 자바스크립트 문법을 구형 브라우저에서도 쓸 수 있게 변환시켜 주는 라이브러리 이젠 npx create-react-app [폴더 이름] 으로 쉽게 설치 가능 리액트 앱을 만들 폴더 생성 터미널 실행 npx create-react-app ./ (현재 디렉터리) npx? Node.js를 통해 Node패키지 실행을 도와주는 도구. create-react-app 이란 npx 레지스트리에 있는 패키지를 react-todo-app폴더에서 실행해서 리액트를 설.. 이전 1 ··· 7 8 9 10 11 12 13 ··· 53 다음
