본문 바로가기
hook실습1. counter 만들기 목차 state 초기화 및 렌더될 화면 디자인 onClick 이벤트 작성 누적 작성 코드 버튼을 클릭하면 값이 증가하는 counter를 작성해보자! 우선 기본 기본 셋팅과 디자인부터 작성해보자. 1. state 초기화 및 렌더될 화면 디자인 1-1. 코드 작성 순서 import 문을 통해 React와 hook을 가져옴 State라는 함수 컴포넌트 생성 retrun으로 렌더될 화면을 디자인하는 코드 작성 useState() 메서드로 hook 호출 1-2. 작성 코드 import React, {useState} from 'react' const State = () => { const [count, setCount] = useState(0) return( You clicked {count} times. Cli.. 2022. 4. 25.
React 환경셋팅1. Create-react-app 1. 실행 커맨드 $ npx create-react-app 디렉토리명 1-1. 실행되지 않은 경우 아래의 화면은 프로젝트 디렉토리를 작성하지 않을 경우 뜨는 문구이다. 아래의 화면이 확인된다면 커맨드에서 디렉토리명을 작성한 뒤 다시 커맨드를 입력하자 1-2. 정상적으로 실행되는 경우 아래의 화면이 나타나게 된다. 2. React 서버 돌리기 2-1. 1번에서 작성한 디렉토리로 이동 후 커맨드 입력 $ cd 디렉토리명 $ npm run start 2-2.dev 서버 열기 dev 서버를 시작한다는 문구가 확인되며 브라우저를 띄우겠다는 팝업이 뜬다 ok를 누르면 아래와 같은 화면이 완료되며 셋팅이 끝난다 3. 셋팅 webpack, babel, react, react-dom, eslint 설치되어 있음 함수 컴.. 2022. 4. 25.
댓글4. 기능구현(U) 1. span에 줄 onClick 이벤트 함수 선언 1-1. 현재 타겟이 되는 span의 내용 가져오기 handleClick = e => { console.log(e.target.innerHTML) } 1-2. items의 li 수정해서 span에 onClick 이벤트 주기 렌더될 때는 content의 내용이 나타나고, span 클릭 시 handleClick 이벤트 실행 items = () => this.props.list.map((v, k) => { return ( {v.userid} {v.content} {v.date} ) }) 2. 상태를 저장할 state 선언 2-1. 클릭 시 content를 저장하기 위해 CommentList 컴포넌트에 state값 주기 상태의 update 속성은 클릭 시, i.. 2022. 4. 25.
댓글3. 기능 구현(C) -수정중 상위가 아닌 현재 컴포넌트(CommentForm) 컴포넌트에 state 선언해서 인풋에 넣은 내용만 최신화 및 submit 눌렀을 때 인풋에 어떤 내용 있는 지 정확하게 확인 가능 1. 인풋박스 상태 최신화 class CommentForm extends React.Component { state = { value: '' } render() { return( ) } } 함수를 만들어서 밸류 값을 반영해보자 handleChange = e => { const {value} = {...e.target} this.setState({ value }) } 폼 컴포넌트의 인풋에 이벤트 작성 onChange={this.handleChange} 2. 폼을 제출할 때 이벤트를 발생시키기 위해 함수 선언 후 이벤트 작성 ha.. 2022. 4. 25.
댓글2. 기능 구현 (R) 목차 App컴포넌트로 state 끌어올리기 state의 list, CommnetList 컴포넌트에 props로 전달 리스트 렌더하기 componentDidMount() 메서드로 CSR 누적 작성 코드 list에서 state를 선언하면 데이터를 뿌리는 것은 쉽다. 하지만 컨텐츠의 내용은 사용자가 Form의 인풋 내용을 서브밋 하는 내용이 들어가야 한다. 따라서 Form의 내용을 List로 받아야 함 props는 부모 컴포넌트에서 자식으로 전달할 수 있음 따라서 상태 끌어올리기 스킬을 통해서 상태를 Comment로 끌어올려서 Comment에서 자식인 Form과 List로 전달해야 함 하지만 현재 코드에서는 Comment 컴포넌트에 props.children을 입력했으므로 앱 컴포넌트에 state를 입력할 것.. 2022. 4. 25.
댓글1. 디자인 목차 기본 틀 작성 form list 누적 작성 코드 게시판 view 페이지에 들어갈 댓글 기능을 구현해보자! 틱택토 게임 때 작성했던 레이아웃을 가지고 와서 컴포넌트만 변경해서 기본 틀을 작성해보자! 다만, 이번에는 props 속성 중 children이라는 속성을 사용해서 자식이 아닌 자손에게 props를 넘겨주는 스킬을 사용해 볼 것이다. props.children이란? props 속성 중 children 사용 시, 자식 뿐만이 아닌 자손에게 props를 전달 가능 앱 컴포넌트에도 상태가 존재하는 경우 예를 들면 (로그인 기능의 로그인 구분값) Comment 컴포넌트가 댓글에 대한 state값을 가지고 있는 경우 state 값을 App 컴포넌트에 있는 아이들이 Comment 컴포넌트에 넘겨주고 Com.. 2022. 4. 25.
틱택토6. 승자 결정하기 목차 승자를 반환하는 함수 선언 클릭시 동작하는 이벤트 함수 내에 승자 반환함수 호출 div에 status 렌더 1. 승자를 반환하는 함수 선언 먼저 함수의 내부에 이기는 경우를 배열로 작성해보자. 이중배열을 통해 이중배열의 엘리먼트는 squares의 인덱스 번호가 될 것이다. const calculateWinner = (squares) => { const line = [ [0, 1, 2], [3, 4, 5], [6, 7, 8], [0, 3, 6], [1, 4, 7], [2, 5, 8], [0, 4, 8], [2, 4, 6] ]; }; 다음으로는 이기는 경우에 대한 반복을 돌리면서 각각의 경우의 엘리먼트(즉, 매개변수로 들어올 squares의 인덱스가 될 부분)을 각각 변수에 담아보자. 그 다음엔 매개변.. 2022. 4. 23.
틱택토5. 컴포넌트 작성(3) 지난 게시글에서는 board 컴포넌트에 상태를 선언하고, setState로 상태 변경을 감지한 후, Square컴포넌트로 onClick 이벤트를 작동시킬 함수를 props로 전달하였다. 이번 게시글에서는, state값 props로 전달해서 버튼 클릭 시 'X' 또는 'O' 렌더링 한번 클릭한 버튼을 재클릭할 수 없도록 하기 를 해볼 것이다. 1. state값 props로 전달해서 버튼 클릭 시 'X' 또는 'O' 렌더링 버튼엘리먼트의 내부의 value props로 전달할 수 있도록하는 코드 부터 시작해보자. 지난 게시글에서 squares 변수를 선언하여 handleClick 안에서 작성해두었기 때문에 간단히, renderSquare 함수 안의 Square 컴포넌트로 보낼 props인 value의 값을 아.. 2022. 4. 23.
틱택토4. 컴포넌트 작성(2) 지난번 게시글에서 아래 부분까지 완료하였다. 3개의 컴포넌트 생성 매개변수 i를 받는 renderSquare 함수 생성 매개변수 i를 Board 컴포넌트에서 Square 컴포넌트로 props 전달 리액트 dev 확장파일을 통해 props 잘 전달된 점 확인 오늘은 나머지 부분을 시작해보자. 우선은 버튼을 클릭했을 때 'X' 또는 'O'로 플레이어가 나타날 수 있게 하자! 이를 위해 board 컴포넌트 안에 state를 선언 board 컴포넌트 안에 handleClick이라는 함수를 선언해서 props로 Square 컴포넌트에 전달 Square 컴포넌트에서 온클릭 이벤트 작성 후 이벤트 동작 여부 확인 handleClick 함수의 내용 작성 를 할 것이다. 우선, board 컴포넌트 안에 상태(state).. 2022. 4. 22.

티스토리툴바