전체 글 (44) 썸네일형 리스트형 React 기본적인 회원가입 구현하기 -2 (목차 2번 feat. custom Hooks 알아보기) 목차 2번 그 전 게시글을 통해서 기본적인 React 회원가입 코드를 구현하였다. 이번엔 좀 더 심화과정을 통해서 회원가입 코드를 짜보겠다. 심화과정이긴 하지만 코드량은 훨씬 줄여서 작성할 수 있다. 먼저 완성된 코드를 보여주도록 하겠다. import React,{useState} from 'react' const useInput = (defaultValue) => { const [value,setValue] = useState(defaultValue) const onChange = e => { setValue(e.target.value) } return{ value, onChange, } } const Form = () => { const id = useInput('') const pw = useInp.. React 기본적인 회원가입 구현하기 - 1(목차 1번 real 기본) 목차 1. 기본적인 회원가입 2. 좀더 심화.. 3. more than 심화.. 우리는 앞서 함수형 컴포넌트와 Hooks에 대해서 알아보았다. 이제 우리가 공부한 것을 가지고 간단한 회원가입 양식을 만들어보려고 한다. 먼저 화면이 어떤식으로 렌더링되는지 보여주도록하겠다. ( CSS는 따로 안함 ) 그럼 이제 기본적인 회원가입의 순서부터 보도록 하자. 1. 기본적인 회원가입 import React,{useState} from 'react' const Form = () => { const [values,setValues] = useState({userid:'',password:''}) // 객체 const handleSubmit = e => { e.preventDefault() setValues({...va.. React의 함수형 Component ( feat. Hooks ) 목차 1. 함수형 컴포넌트란?? 2. Hooks 3. useState 4. useEffect 5. 함수 컴포넌트 props 전달 1. 함수형 컴포넌트 함수형 컴포넌트란 이름에서부터 알 수 있듯이 함수를 기반으로 함 컴포넌트를 말한다. 기존에 우리가 사용했던 class 컴포넌트와 달리 코드가 훨씬 짧고, 직관적으로 짤 수 있으며 함수형 프로그래밍을 할 수 있게 해준다. (this를 더이상 안써도 된다!!) 지금은 아니지만 과거 함수형 컴포넌트의 단점으로는 state와 라이프사이클 API를 사용할 수 없다는 것이 었는데 이러한 단점을 해결하고자 Hooks 가 나왔다. Hooks에 대해서는 아래에서 설명을 더 하게 될텐데 2019년 이후부터 함수형 컴포넌트에 Hooks라는 함수모음을 가져와서 함수형 컴포넌트에.. React 댓글 구현하기 이번에는 React로 댓글을 구현하는 방법을 해볼 것이다. DB 연결없이 임시로 데이터를 사용해서 댓글 구현을 해보도록 하자. 안녕하세요 1 ~ 3까지는 원래 따로 임시데이터를 저장해서 나타낸 모습이고 그 밑에서부터 나온 댓글이 제가 직접 작성해서 올린 댓글의 모습입니다. 위의 빈칸에 댓글의 내용을 입력할 수 있고 X 표시를 누르면 지울 수 있으며 댓글의 내용을 선택하면 박스 형태가 나오면서 댓글 수정까지 가능하게 할 것이다. ( CRUD ) 컴포넌트의 구성은 아래와 같다 . CommentForm은 댓글을 입력하는 공간이고 CommentList는 댓글의 내용이 나타나는 공간이다. 자 이제 코드를 하나하나씩 작성해보도록 하자. import React from 'react' import ReactDOM fr.. 틱택톡 게임 구현하기 틱택토(tic-tac-toe) 틱택토 게임은 두 명이 번갈아가며 O와 X를 3x3 판에 써서 같은 글자를 가로, 세로, 혹은 대각선 상에 놓이도록 하는 놀이이다. 이번 글에서는 틱택토 게임을 진행할 수 있게 구현하고, 게임이 끝난 시점에서 승자를 결정하는 것과 다음 플레이어가 누구인지에 대해서도 나타내고자 한다. 자 이제 리액트로 코드를 구현해보도록 하자. 우리는 3개의 컴포넌트를 사용할 것이다 . 1.Game 컴포넌트 2. Board 컴포넌트 3. Square 컴포넌트 class Square extends React.Component { render(){ return( ) } } class Board extends React.Component { render(){ return( ) } } class G.. Class와 기본 문법 Class 클래스는 객체지향을 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로 객체를 정의하기 위한 상태와 함수로 구성된다. 우리가 여러 종류의 객체를 여러 개 만들고자 하는 경우가 생긴다. 이럴 때 우리는 new 연산자와 생성자 함수에서 배운 ' new function ' 을 쓸 수 있다. 여기에 더해서 클래스(class)라는 문법을 사용하면 객체 지향 프로그래밍에서 사용되는 다양한 기능을 자바스크립트에서도 사용할 수 있습니다. Class 기본 문법 class Obj{ constructor(a,b,c,d){ this.name = a this.key = b this.gender = c this.birth = d } } const ab = new Obj('1','2','3','4') console.lo.. Webpack 소개, 설치법 Webpack 이제 Webpack에 대해 알아보도록 하자. Webpack을 공부하기전에 Webpack이 생겨나게된 배경과 역사에 대해서 간략하게 설명하겠다 JavaScipt는 2015년 ES6 문법이 등장하기 이전과 이후로 나뉘어진다. 2015년 이전에는 module 개념이 존재하지 않았었고 ES6 문법이 등장하면서부터 module 개념이 도입되기 시작했다. 그 이전에는 JavaScript에 module 개념이 없었기 때문에 module 형식으로 코드를 작성하고 사용하기 위해 webpack이라는 개념이 등장하게 되었다. module은 쉽게말해서 파일을 나눠서 저장하는 것을 말한다. A와 B라는 파일을 나눠서 저장했을 때 A파일에서 B파일의 내용을 가져오고 싶을 때 module 코드를 이용해서 내용을 가져.. 리스트와 key React를 이용해서 리스트를 만들어 보자.. 우선 React 기본세팅을 맞춰보자 - ReactDOM.render를 이용해서 컴포넌트를 만들어보자 이제 List 컴포넌트를 만들어서 컴포넌트 render 안에다가 넣어서 실행을 시켜보자. 그리고 state 객체 안에 리스트 배열을 하나 만들어보도록 하자 // List 컴포넌트 class List extends React.Component { state = { board : [ {id:1, subject:'ingoo'}, {id:2, subject:'ingoo'}, {id:3, subject:'ingoo'}, {id:4, subject:'ingoo'}, ] // DB통신해서 결과물을 받은 코드라고 가정하자 } // Array 반복문 forEach, filte.. 이전 1 2 3 4 5 6 다음
