Frontend/React (10) 썸네일형 리스트형 [React] 유형테스트 만들기(2) 기획하기 페이지 나누기 레이아웃 짜기 버튼 만들기 버튼 기능들 결과창 만들기 이제 기획을 대충 마무리 했기 때문에 일단 결론적으로 내가 사용한 라이브러리를 말하자면 styled-components react react-router-dom react-redux redux react-dom 를 사용했다... 사실 연구하면서 하느라 설치해놓고 쓰지 않은 것도 있을 것 참고로 IntelliJ를 사용했습니다. 일단 프로젝트를 시작하자 react프로젝트 환경설정 및 시작은 이전 게시글 참고 2020/11/17 - [WEB_APP/React] - [React] 개발환경 만들기 [React] 개발환경 만들기 생활코딩 : 리액트 편을 보고 작성한 게시글입니다. React사용의 장점 Component를 이용한... 가독성.. [React] 유형테스트 만들기(1) - 기획 dsc라는 동아리에 가입해서 리엑트를 간단하게 공부했다. 공부를 한 것을 토대로 팀원들과 간단한 유형테스트를 만들어 보기로 했고, 완성했다! react-native를 이용하려다가... 일단 react 부터 사용해보자는 팀원들의 의견이 맞는 것 같아 react로 진행했다. 엄청나게 잘 했다거나 배포용도로 만든 것은 아니지만, 기초를 다지고 개념을 정리해보기 참 좋은 프로젝트였다고 생각된다. 만드는 도중에 정리했으면 더 좋았겠지만... 그 때는 완성하는게 급했고, 리액트 프로젝트 자체가 어색하고 처음이어서 이것저것 찾아보느라 힘들었기에 지금 정리함 영상이 안올라가서 gif를 만들었는데 왜인지 13,14페이지만 gif로안만들어져서 그냥 뺌... 프로젝트는 다음과 같이 진행했다 기획하기 페이지 나누기 레이아웃 .. [React] 마무리 정리 + 코드모음 생활코딩 : 리액트 편을 보고 작성된 게시글 입니다. 여태까지 게시글 코드 총 정리 App.js import React, { Component } from 'react'; import './App.css'; import TOC from "./components/TOC"; import Subject from "./components/Subject" import ReadContent from './components/ReadContent'; import Control from './components/Control'; import CreateContent from './components/CreateContent'; import UpdateContent from './components/UpdateConte.. [React] Update, Delete기능 구현 생활코딩 : 리액트 편을 보고 작성된 게시글 입니다. Update , Delete기능 구현 코드 정리 먼저 시작전에 render내의 if-else문으로 content의 내용을 결정짓는 내용이 너무 길기 때문에 다른 함수로 분리한 후 -> getContent(){} _article변수를 return값으로 뱉게하고, _article이 쓰이던 content부분에 getContent() 를 호출하도록 변경 import React, { Component } from 'react'; import './App.css'; import TOC from "./components/TOC"; import Subject from "./components/Subject" import ReadContent from './compo.. [React] Create기능 구현 생활코딩 : 리액트편을 보고 작성된 게시글 입니다. React 만을 이용하여 READ/CREATE/UPDATE/DELETE 구현가능! Read : 이전까지 계속 해오던 기능! Create / Update / Delete 목표 1단계 버튼 컴포넌트 만들기 링크와 버튼으로 버튼 제작 App.js render()함수 내 버튼을 만들기를 원하는 부분에 추가 create update 주의* : delete기능은 링크로 구현하지 않는 것이 좋음 컴포넌트로 만들어주기 컴포넌트 명 : src/component/ 경로상에 Control.js파일을 만들어서 컴포넌트를 제작 Control.js import React, { Component } from 'react'; class Control extends Component.. [React] Event 생활코딩 : 리액트 편을 보고 작성된 게시글입니다. 동적으로 발생하는 event 표현하기 prop, state를 모두 사용! EVENT State를 이용하여 상태를 확인하고, 상태에 따라 prop값을 변경하여 동적인 페이지를 만들기 목표 를 해주는 event표현하기 1단계 : State를 부여하고 그에 따라 props값을 변경해주기 State & render() React에서는 State의 값이 변경되면, 변경된 State값을 가지는 Component들의 render()함수 (+ 그 하위의 Component들의 render()함수) 들이 다시 호출됨 render() 어떤 HTML을 그리는지 결정함 즉, State가 변경되면, render()함수가 재 호출된다는 의미는 State나 props의 값이 변경되.. [React] State 생활코딩 : 리액트편을 보고 작성된 게시글 입니다. Prop & State Props : 사용자가 컴포넌트를 사용하는 입장에서 중요한 것(사용자가 컴포넌트를 조작하게 해주는 것) State : Props의 값에 따라 내부 구현에 필요한 데이터들(컴포넌트 내부적으로 사용되는 것들, 사용자는 알아서는 안됨 + 딱히 알 필요도..) 사용자들에게 Prop의 값을 알려주지 않을 수 있게됨 외부에서 알지 않아도 되는 정보를 철저하게 은닉함 Constructor(prop) Component가 실행될 때, render()보다 먼저 실행되어서 state값을 초기화 시켜주는 코드 가장 먼저 실행되어 초기화를 담당하는 함수 1개의 값 전달하기 (변수 이용) import React, { Component } from 'rea.. [React] Component 생활코딩 리액트 편을 보고 작성된 게시글입니다. * public directory create react app에서 npm run start시 파일을 찾는 다큐먼트 root 다음과 같은 웹을 만든다고 하면, REACT 를 사용했을 때 REACT를 사용하지 않을 때 여러 줄을 하나의 줄로서 표현하여 간결해지며 유지보수가 좋아짐 그럼 실제로 오른쪽과 같은 웹을 3가지의 태그를 생성하여 오른쪽으로 변경해도 똑같은 기능을 하도록 만들어보자 Component만들기 주의! 1. 컴포넌트의 이름 첫글자는 대문자 2 . 컴포넌트는 항상 하나의 최상위 태그로 시작해야함 1 ) App.js 파일에 원하는 컴포넌트 이름으로 컴포넌트를 만들어줌 class 컴포넌트명 extends Component{ render(){ retu.. 이전 1 2 다음
