SW과정 REACT 13일차 0913

1. BoardWrite.js

import React from "react";
import './Board';
import {Link} from 'react-router-dom';
import axios from "axios";


class BoardWrite extends React.Component{

    boardWriteHandler= async ()=>{
     const title_ele=document.getElementById("title");
     const content_ele=document.getElementById("content");
     console.log(title_ele.value, content_ele.value);
     
     const returnData=await axios.post('http://localhost:9999/boardWrite', null,
     {params:{title:title_ele.value, content:content_ele.value}});
     alert(returnData.data);
    
    };

    render(){

        return (
            <div className="about__container">

                <div className="row">   
                        <table className="table" style={{textAlign: 'center' }} >
                            <thead>
                                <tr className="table-active">
                                    <th scope="col" style={{width: '50%' }} > 글제목 : <input id='title'/> </th>
                                   
                                </tr>
                            </thead>
                            <tbody>
                                <tr><td colSpan="2"><textarea rows="10" cols="50" id="content"></textarea></td></tr>
                                <tr >
                                    <td colSpan="2">
                                        <button  className="btn btn-info" onClick={ this.boardWriteHandler } >등록</button>
                                         &nbsp;
                                         <button  className="btn btn-info">취소</button>
                                         &nbsp;
                                        <Link to={{pathname:'/board', state:{} } }>
                                        <button type="button" className="btn btn-warning">글목록</button>
                                       </Link>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
        );
    }
}

export default BoardWrite;

게시판 기능을 구현하기 위한 리액트 작업 이후 스프링부트에서 데이터값을 저장할 수 있게 만들어 준 뒤에 매핑을 함

2. BoardController.java 수정부분

@PostMapping("/boardWrite")
	@ResponseBody
		public String boardWrite(@ModelAttribute Board b, HttpSession session) {
		Member m=(Member)session.getAttribute("m");
		if(m==null) {
			return "로그인부터 하세요";
		}else {
		 b.setId(m.getId());
		 System.out.println(b);
		 try {
			boardService.boardWrite(b);
		} catch (Exception e) {
			e.printStackTrace();
			return "글등록 실패";
		}
		 return "글이 등록되었습니다";
	  }
	}

3. State를 사용하는 기본 방식

class Navigation extends React.Component{
    state={count:0};

    a= ()=>{
        this.setState({count:this.count+1});
    };

    render(){
        return (
            <div>
                {this.state.count}
                <button onClick={this.a} >add</button>
            </div>
        );
    }
}

4. 스토리지

로컬 스토리지에 무엇인가를 저장하면 보안에 취약함

로그아웃을 해도 아이디가 브라우저상에 기록되어있음
세션 스토리지에 저장하는것이 나은 선택