Cute Bow Tie Hearts Blinking Pink Pointer

리액트 20

[React/Javascript] 리액트 CLI로 로그인 구현하기(DB연결 X)

목차 - 리액트 cli 다운로드 - hooks - 로그인 구현 - 삼항연산자 조건문 true일 때만 or false일때만 리액트 CLI 다운로드 터미널에서 npx create-react-app [디렉토리명] 를 입력한다.(오래 걸림) npx create-react-app [디렉토리명]로 다운로드 시, 기본적인 세팅은 다 되어있다. webpack, babel, react, react-dom 등등... 많은 기능들이 설치된다. 다 받아지면, cd [디렉토리명] npm run start Hooks 함수형 컴포넌트에서, 상태를 만들 수가 없고, 생명주기를 사용할 수 없다는 단점을 개선한 함수 모음이 바로 hooks이다.. 장점 : this 생산성 / 코드 가독성 재활용/ 커스텀 훅 로그인 구현하기 App.jsx..

[React/javascript] 댓글 CRUD 구현하기

App.jsx class App extends Component{ state = { value:'hello world!!!!', list:[] } // 생명주기 함수 componentDidMount(){ // 최초실행 후(화면 랜더 후) 실행되는 함수. this.setState({ // 불변성... 데이터가 화면이바뀐다. ...this.state, list:[ {userid:'web7722',content:'안녕하세요2',date:"2022-04-21", updateflag:true}, {userid:'web7722',content:'안녕하세요3',date:"2022-04-21", updateflag:true}, {userid:'web7722',content:'안녕하세요4',date:"2022-04-21..

[React] 생명주기 함수

componentDidMount() 이 함수는 컴포넌트가 처음 화면에 그려지면 실행되는 함수이다. (render()가 실행되고 나서 실행되는 함수라고 생각하면 된다.) componentDidUpdated() 리액트에서 업데이트로 분류한 생명주기 함수이다. 화면이 업데이트되면 실행된다. componentWillUnmount() 리액트에서 컴포넌트가 죽을 때(unmount) 호출되는 함수 Reference: https://blog.naver.com/melon940925/222027028412 리액트:: 생명주기 함수 아마 리액트가 편한 이유는 state와 render()와 같은 리액트가 미리 구현해 놓은 함수나 클래스 등을 사용... blog.naver.com

[React] Webpack(웹팩)이란? 웹팩 설치 및 사용법

목차 -웹팩이란? -entry -output -loaders -plugins -mode -웹팩 설치 및 사용법 웹팩이란? 웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리이다. 모듈 번들러는 다음과 같은 장점이 존재한다. 여러 파일의 자바스크립트 코드를 압축하여 최적화 할 수 있기 때문에 로딩에 대한 네트워크 비용을 줄일 수 있다. 모듈 단위로 개발이 가능하여, 가독성과 유지보수가 쉽다. 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환시켜 준다(예를 들면 typescript). 물론, 수 많은 자바스크립트 파일이 하나의 파일로 묶인다면 초기 로딩 속도가 커질 수 있으나, 웹팩에서는 ..

[React]리액트(React)란? 리액트 기본 개념

목차 - 리액트란? - 라이브러리, 프레임워크 차이 - 리액트 특징 - 컴포넌트(Component)란? - 리액트 환경 기본 세팅 - 리액트 React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 라이브러리와 프레임 워크의 차이 라이브러리: 폴더 구조가 없는 모듈 프레임워크: 폴더 구조가 있는 모듈 React의 특징 1. Data Flow 2. Component 기반 구조 3. Virtual Dom 4. Props and State 5. JSX 이번 글에서는 Component에 대해서만 가볍게 알아볼 것이다. Component란? Component는 독립적인 단위의 소프트웨어 모듈을 말한다. 즉, 소프트웨어를 독립적인 하나의 부품으로 만드는 방법이라고 ..