이번 글을 통해 배워갈 내용 function components 지금까지는 클래스 컴포넌트를 사용해서 예제를 작성했습니다. 클래스에서는 React.Compoent를 상속 받아서 render method로 출력을 했습니다만 일부 컴포넌트는 Class 없이 함수로 간단하게 표현 할 수 있습니다. 이를 통해 더 간결하고 명확한 코드를 작성 할 수 있습니다. 상황에 맞게 둘중에 적합한 방법을 쓰는게 좋을 것 같습니다. 제가 참조하는 리액트 공식 문서 튜토리얼에서는 Square 클래스를 함수로 변경하기에 저도 한번 보고 따라서 변경해보겠습니다. // import React from "react"; // before // export default class Square extends React.Component ..
이번 글을 통해 배워갈 내용 controlled components 여러개의 자식 컴포넌트에서 부모가 데이터를 얻을 때 혹은 두개의 자식 컴포넌트 간에 데이터를 주고 받을 때 공유하는 State(상태)를 부모 컴포넌트에서 선언해줘서 관리를 해줍니다. 부모 컴포넌트는 자식들에게 데이터를 props를 통해 전달하고 이는 부모와 자식 그리고 자식과 자식 간에 데이터를 동기화 해줍니다. constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; } 먼저 보드 클래스에 생성자를 추가해줍니다. 그뒤에 renderSqaure 함수를 변경해줍니다. renderSquare(i) { return ; } 위에서 한 내용을 설명하자면 B..
이번 글을 통해 배워갈 내용 onclick 지난 강의에서 보여드린 Square component의 square 클래스를 가진 button에 onClick 함수를 넣어줍니다. console.log("click")}> 클릭을 하면 화살표 함수를 써서 함수를 건내주고 콘솔창에 클릭을 표시해줍니다. localhost로 보시면 위와 같이 (발글씨 1. Click, 2. F12 눌러서 확인) 확인이 가능합니다. 자이제 생성자를 만들어서 상태(state)를 관리해보겠습니다 constructor(props) { super(props); this.state = { value: null, }; } 위에 코드를 추가해줍니다. 생성자가 props를 인자로 받아서 super 함수로 subclass를 정의하고 Square cla..
이번 글을 통해 배워갈 내용 props 를 통한 데이터 전달 props의 정의 리액트에서 어떠한 값을 컴포넌트를 통해 전달하고자 할때 props(속성)을 주로 사용합니다. 먼저 보드 컴포넌트를 열고 renderSquare(i) { return ; } 위와 같이 Square 컴포넌트 함수에서 value 값을 넣어줍니다. 그렇게 되면 함수 컴포넌트를 호출 할때 0 부터 8까지 값이 들어갈 것입니다. 사각형 (Square) 컴포넌트를 열고 {this.props.value} 상위 컴포넌트에서 받은 props 값을 출력해주면 위와 같이 0 부터 8 까지의 값을 잘 전달 받아 출력해주는 것을 알 수 있습니다. 다음 강좌에서는 컴포넌트 상호작용에 대해서 알아보겠습니다. 감사합니다. 구글링하다가 알게된 Props 관련..
이번 글을 통해 배워갈 내용 리액트 컴포넌트 컴포넌트 폴더를 만들고 (src 폴더를 마우스 오른쪽으로 누른뒤 New folder 클릭 이름을 component로 설정) 그안에 |--->component |--->Board.js |--->Game.js |--->Square.js 위와 같이 Board.js, Game.js, Square.js 파일을 추가해줍니다. 틱택토 게임에서 게임을 실행하면 보드가 있고 그안에 사각 모양이 있습니다. 위와 같은 내용을 생각해 두고 https://codepen.io/gaearon/pen/oWWQNa Tic Tac Toe ... codepen.io 공식문서에 있는 틱택토 코드펜 코드를 학습적 용도로 참조및 인용해서 component 폴더 내에 있는 파일들을 작성하겠습니다. 일..
이번 글을 통해 배워갈 내용 리액트 몇가지 키워드 정의 VS 코드를 활용한 몇가지 세팅 리액트의 정의 리액트는 사용자 인터페이스 구축을 위해 사용되는 자바스크립트 라이브러리 입니다. Component 들을 이용해서 UI를 만드는 환경을 제공해줍니다. 진행하기에 앞서서 몇가지 중요 키워드들을 설명하고 가겠습니다 props component들이 받는 매개변수 properties(속성들)의 약자입니다. render 화면에서 보고자 하는 것들의 설명을 반환해줍니다. 리액트는 이 설명을 받아서 결과를 화면에 표시해줍니다. JSX 특별한 구문으로서 구조를 더 쉽게 쓰게 도와줍니다. 예시) 라는 구문은 빌드할때 React.createElement('div'>로 변환됩니다. 자 이제 다시 리액트 프로젝트를 계속 진행하..
이번 글을 통해 배워갈 내용 리액트 공식문서에 나온 틱택토 게임 강좌를 하나씩 설명하면서 진행해보겠습니다. 먼저 리액트를 처음 써보시는 분들은 몇가지 설치 후 진행을 해주셔야 합니다. 윈도우를 기준으로 강의를 작성하였습니다. 맥을 쓰시는 분들은 호환 되는 커맨드를 인터넷 검색하시면서 따라와 주시면 감사하겠습니다. 또한 VS 코드를 기반으로 진행될 예정이니 없으신 분들은 아래에서 다운 받아 주시면 됩니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern ..
이번 글을 통해 배워갈 내용 리액트 앱을 깃 레포에서 풀 받아서 실행 하는 법을 알려드립니다. 1. 윈도우의 경우 CMD 창을 여시고 2. 받고자 하시는 디렉토리(폴더)로 이동합니다 예시 cd C:\learn (폴더를 만드시고자 한다면 mkdir 폴더명 을 통해 만드신뒤 이동하시면 됩니다.) 3. 깃 클론을 합니다 git clone 레포url 예시 git clone https://github.com/songk1992/ppp_2021_summer_frontend 4. 다운이 다되면 cd를 이용해 다운받은 레포의 디렉토리로 이동합니다. cd 디렉토리명 cd ppp_2021_summer_frontend 5. package.json 파일을 확인해서 script가 잘 써있는지 확인합니다. "scripts": { ..
