yunaaa's yunaaa's

JavaScript/React

• 리액트 디자인 패턴(React Design Pattern)

  JavaScript/React 2023. 2. 16. 15:29

  1. Compound Components Pattern 2. Controls Props Pattern 3. Custom Hook Pattern 4. Props Getters Pattern 5. State reducer pattern

  Read More
• State

  JavaScript/React 2022. 12. 23. 09:03

  state - 내부에서 바뀔 수 있는 값을 의미 1. 클래스형 컴포넌트가 가지고 있는 state 2. 함수 컴포넌트에서 가지고 있는 useState라는 함수를 통해 사용하는 state 클래스형 컴포넌트의 State 실습1 // counter.js import { Component } from 'react'; class Counter extends Component { constructor(props){ super(props); // state의 초깃값 설정하기 this.state = { number:0 }; } render(){ const { number } = this.state; return ( {number} { // this.setState를 사용하여 새로운 값 할당 this.setState({ ..

  Read More
• 이벤트(Event)

  JavaScript/React 2022. 12. 17. 16:58

  이벤트(event)란?!\ 웹 브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(event)라고 한다. 예를 들어, 버튼에 마우스 커서를 올리면은 onmouseoㅍer이벤트를 실행, 클릭했을때는 onclick 이벤트를 실행 cf. DOM(Document Object Model) 웹페이지에 나타나는 HTML문서 전체를 객체로 표현한 것 HTML에서는 이벤트를 실행하면 " " 사이에 있는 JS를 실행하도록 코드를 작성한다 Click me REACT에서 지원하는 이벤트 종류 Clipboard, Composition, Keyboard, Focus, Form, Mouse, Selection Touch, UI, Wheel, Media, Image, Animation, Transition 실습 1. 컴포넌트 새..

  Read More
• 프라퍼티(Props)

  JavaScript/React 2022. 12. 17. 12:14

  프라퍼티(Props) - properties 의 줄임말으로써 컴포넌트 속성을 설정할 때 사용하는 요소 - props의 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정가능 props 지정해주기 - props 지정해주기전. 부모 컴포넌트는 App 컴포넌트이다 // Mycomponenet.js const MyComponent = () => { return 나의 첫 컴포넌트 } export default MyComponent; // App.js import MyComponent from './MyComponent'; const App = () => { return ; }; export default App; step 1. JSX내부에서 props 렌더링 // MyComponent.js const M..

  Read More
• 컴포넌트(component)

  JavaScript/React 2022. 12. 16. 19:42

  리액트 엘리먼트(React Element) - JSX 문법으로 작성한 요소는 결과적으로 자바스크립트 객체가 되며 이러한 자바스크립트 객체를 리액트 엘리먼트 - 리액트 엘리먼트를 ReactDOM.render 함수의 아규먼트로 전달하게 되면 리액트가 객체 형태의 값을 해석해서 HTML 형태로 브라우저에 띄워주는 것 - 리액트 엘리먼트는 리액트로 화면을 그려내는데 가장 기본적인 요소 일반적인 JSX 형태 import ReactDOM from 'react-dom'; ReactDOM.render(안녕 리액트!, document.getElementById('root')); JSX문법만 따로 변수에 담기 - 여기에서는 element 변수가 리액트 엘리먼트(React Element)가 된다 import ReactDOM..

  Read More
• JSX

  JavaScript/React 2022. 12. 15. 00:26

  import logo from './logo.svg'; import './App.css'; function App() { return ( 안녕리액트!! Edit src/App.js and save to reload. Learn React ); } export default App; # 코드 이해 - 아래처럼 모듈을 불러와서 사용하는 것은 원래 브라우저(browser)에는 없던 기능. 이는 브라우저가 아닌 환경에서 JS를 실행할 수 있게 해 주는 환경인 Node.js에서 지원하는 기능. 참고로 Node.js는 import가 아닌 require라는 구문으로 패키지를 불러 올 수 있다 import logo from './logo.svg'; import './App.css'; JSX - JS에서 사용하는 HTM..

  Read More
• 리액트시작하기

  JavaScript/React 2022. 12. 14. 23:55

  리액트란 처음엔 페이스북 내부 => 오픈소스 => 새로운역사시작! 직전에는 구글의 Angular을 많이 사용함 React영역은 모바일까지 뻗어나간다(React Native) 원래 안드로이드랑 IOS랑 따로따로 만들어야 했는데 React Native를 활용하면 한번에 할 수 있음 node.js 설치하기 Node js란 크롬 v8 자바 스크립트 엔진으로 빌드한 자바스크립트 런타임 이것으로 웹 브러우저 환경이 아닌 곳에서도 JS를 사용하여 연산할 수 있다. 09년에 Node.js를 출시한 이유 JS는 웹 브라우저 영역 외에, 웹 서버, 모바일 애플리케이션, 데스크톱 어플레킹션 영역에서도 엄청나게 활약 리액트는 웹 브라우저에서 실행하는 코드이므로 Node JS와 직접적인 연관은 없지만 플젝을 개발하는데 필요한 ..

  Read More