React 2

[CRUD] #2 배열 렌더링하기

#2 게시판의 내용을 담아둘 배열을 만들고 렌더링 해본다. 1. 렌더링이란? 1) 기본적인 뜻 Render는 html로 입력받아 해석해서 표준 출력 장치(모니터)로 출력한다. 이 작업을 Rendering이라 한다. 2) React에서 rendering data를 html로 변환해서 renderer에게 전달하는 작업을 뜻한다. 2. 구현 구현은 두가지 함수로 작성한다. 1) PostList : 내용을 담아둘 배열 구현 2) Post : 배열의 내용을 key 값에 따라 조회해가며 렌더링하는 작업 구현 map 메서드는 배열 내 요소 하나하나를 콜백 함수로 가공하여 새로운 배열에 저장한다. 즉, 위의 return를 해석하자면 posts 배열의 요소 하나하나를 post 라는 새로운 배열에 저장하고 함수 Post를..

React 2022.10.25

[CRUD] #1 useState를 활용해 Input 구현

#0 최종 목표 : React로 게시판 구현하기 #1 React의 useState를 사용하여 입력 기능의 프로토타입을 구현한다. 1. useState란? 배열을 리턴해주는 함수 state라는 변수를 변경하므로서 컴포넌트에 작업요청을 진행한다. == 화면을 다시 그려준다. state : 컴포넌트 랜더링(컴포넌트에 작업요청)을 할 수 있는 변수 setState : state를 변경시키는 함수 value : state의 초기값 2. 기본 구현 구현 목표는 input 칸 두개에서 입력을 받고 화면에 바로 보여주는 것과 초기화 버튼이다. 우선 useState로 2개의 입력할 변수를 선언해둔다. useState의 setState함수가 불러와지는 경우 state는 변경된다. Title와 Contents의 입력, Re..

React 2022.10.17