develop/React (6) 썸네일형 리스트형 React : public 폴더 이미지 절대경로로 사용하기 오픈 그래프로 썸네일 이미지를 넣으려는데 아무리 넣어도 썸네일이 뜨지 않았다. 우선 에서 이미지 경로는 상대경로가 아니라 절대경로로 들어가야한다! publlic 폴더에 썸네일에 사용할 이미지를 넣어주고 이렇게 %PUBLIC_URL% 를 사용하면 된다. 나같은 경우엔 public 폴더 안에 바로 이미지가 있으니 %PUBLIC_URL%/jeju.jpg가 됨. 더 자세한 내용은 공식 문서를 참고하세요! https://create-react-app.dev/docs/using-the-public-folder/ Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. cre.. React : useRef() 사용 프로젝트를 진행하면서 리액트 상태 관리에서 애를 많이 먹었다. 덕분에 라이프사이클과 useEffect에 대해 공부할 수 있었다! useEffect()에서 setState()를 사용하면 state가 바로 업데이트 되지 않아 초기값만 반환했다. 그러다 hook에서 useRef를 알게 되었고 useEffect에서 사용하니 컴포넌트가 마운트 되는 시점에서도 원하는 값을 불러올 수 있었다 ㅎㅎ 다음에도 비슷한 문제가 발생했을 때 참고할 수 있도록 정리해보고자 한다. useRef const resetRef = useRef(initialValue); useRef는 current 프로퍼티로 전달된 인자로 초기화된, 변경 가능한 ref객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다. useRef.. React 4: 함수형과 클래스형 보호되어 있는 글입니다. React 3 : CRUD 생활코딩 강의 들으면서 주석으로 정리한거 읽어보면서 복기하기 App.js import './App.css'; import React, { Component } from 'react'; import TOC from './components/TOC'; import ReadContent from './components/ReadContent'; import Subject from './components/Subject'; import Control from './components/Control'; import CreateContent from './components/CreateContent'; import UpdateContent from './components/UpdateContent'; //App 컴.. React 2 : props, state 리액트의 인프라라고 할 수 있는 컴포넌트 컴퍼넌트는 js와 비슷한데 props라는 인자를 입력 받아 화면에 어떻게 나타날지 기술하는 react 엘리먼트를 반환ㄹ한다. 모든 리액트의 컴포넌트는 자신의 Props를 다룰 때 반드시 순수 함수처럼 동작해야 함. state는 props와 유사하지만, 은닉되어 있으며 컴포넌트에 의해 제어되는 특성을 가지고 있다. java에서 생성자랑 비슷한거같음...state는 props는 읽기 전용이고 컴포넌트 외부에 있음 그리고 수정할 수 없다. 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것 class App extends Component { render() { return( ; //title과 content에 해당하는게 props ) } } //Subject.. React 1 : 컴포넌트(Component) 리액트는 프론트에서 가장 사용도가 높은 프레임워크라고 한다..! UI를 구축할 때 가장 효율적이고 유연한 js라이브러리 (홈페이지 참고)라고 함. 어렵지만 천천히 익혀나가려고 한다 공부는 리액트 공홈과 생활코딩 강의를 통해 진행할 예정. 복습이 최고!!! 부족한 부분이 많지만 내 방식대로 정리하려고 함 컴포넌트란? 리액트는 컴포넌트라는 작은 부분들을 이용해 프레임을 구축해나간다. class Test1 extends Component { render(){ return( //밑에 Subject클래스를 부름 //단, 같은 파일 내에서는 저렇게 가능하지만 다른 파일이라면 import해줘야 함. ); } } class Subject extends Component{ render(){ return( Hi my na.. 이전 1 다음
