tonirr

useEffect(() => {}, []); useEffect(() => { console.log("컴포넌트 나타남"); return () => { console.log("컴포넌트 사라짐"); }; }, []); 컴포넌트 처음 로드 시 useEffect(() ⇒ {}, [value]); useEffect(() => { console.log("value 컴포넌트 나타남"); return () => { console.log("value 컴포넌트 사라짐"); }; }, [value]); 컴포넌트 처음 로드 시 컴포넌트 로드 후 title 수정 시

create-react-app 프로젝트의 구조 React 개발환경 설치에서 생성한 create-react-app 프로젝트의 기본 구조에 대해 알아보겠습니다. create-react-app으로 프로젝트를 생성하면 기본적으로 node_modules, public, src, .gitignore, package-lock.json, package.json 파일이 생성됩니다. 위부터 차례대로 살펴보겠습니다. node_modules 설치된 외부 라이브러리가 포함되어 있으며 라이브러리 구조를 파악할 수 있습니다. create-react-app을 생성하면 node_modules 폴더에 기본 라이브러리가 추가되어 있습니다. 추가적으로 라이브러리가 필요할 경우 npm install 명령어를 통해 설치할 수 있습니다. npm..

React는 컴포넌트들로 이루어져 있습니다. 컴포넌트를 만드는 방법은 대표적으로 Class를 사용하는 방법과 Function을 사용하는 방법이 있습니다. 각각의 특징에 대해 알아보도록 하겠습니다. Class 컴포넌트 - React에서 제공하는 컴포넌트를 extends하여 사용 state Class에 포함되는 데이터가 저장되는 객체입니다. state가 변경되면 render()가 호출되면서 컴포넌트를 다시 그립니다. render() render()는 클래스 컴포넌트에서 반드시 정의해야 하는 메서드입니다. React에서 정의한 컴포넌트, 여러개의 엘리먼트를 묶어 표시할 수 있는 Fragment등이 render()에 포함됩니다. 브라우저와 직접적인 상호작용을 하지 않습니다. lifecycle methods li..

1) nodejs 다운로드 Download Link https://nodejs.org/ko/ 참고 https://javacpro.tistory.com/62 2) Editor - Visual Studio Code Download Link https://code.visualstudio.com/ 관련 Extension Reactjs code snippets react관련 템플릿을 자동으로 생성해줌 Auto Import 필요한 기능을 자동으로 import해주며 component간 상대경로를 자동으로 파악해주어서 유용함 Prettier 코드를 가독성있게 정리 3) React 설치 및 create-react-app 생성 다운로드 방법(공식문서) https://reactjs-kr.firebaseapp.com/docs..

React에서의 class component와 function component의 차이를 정리하고 Hook의 개념이 생겨난 배경을 알아보고자 한다. 함수형 컴포넌트(function style) 순수 자바스크립트 함수를 사용해서 컴포넌트를 정의한 것 특징 코드를 간결하게 작성할 수 있음 state를 갖지 못하여 setState를 사용하는 것이 불가 life-cycle함수 사용이 불가 선언과 리턴방법 function FuncComp(props){ return( ... ); } 클래스 컴포넌트(class style) React.Component 를 상속받은 클래스를 이용해서 컴포넌트를 정의한 것 특징 setState를 사용할 수 있음 선언과 리턴방법 class ClassComp extends React.Com..

컴포넌트 제작하기 구조 App.js Subject.js TOC.js Control.js Content CreateContent.js UpdateContent.js 컴포넌트 사용하는 법 아래와 같이 사용하는 쪽의 component에 import를 해주고 사용될 이름을 함께 입력 import Subject from "./components/Subject"; render 함수의 return 부분에 설정해 준 이름으로 사용할 위치에 태그를 생성한다. state 사용하기 state는 언제 사용? React에서 동적인 데이터를 사용할 때 state를 사용함 특징 아래와 같은 형식으로 constructor안에 초기값을 설정해 주어야 한다. this.state = {} state값 변경은 직접 조작할 수 없다. sta..

초기값을 정해주고자 할 때 constructor의 state에 지정해준다. constructor(props) { super(props); this.state = { posts: [], comments: [] }; } 이벤트를 통해 state의 초기값을 바꾸고자 한다면 this.setState를 사용한다. 단, onClick등 함수 내에서 state의 값을 바꾼다면 this를 인식하지 못하므로 함수뒤에 .bind(this)를 붙여 해당 컴포넌트를 인식시켜준다. componentDidMount() { fetchPosts().then(response => { this.setState({ posts: response.posts }); }); fetchComments().then(response => { this..