JavaScript(51)
-
[React] useState를 통한 동적 상태 관리
useState는 React의 hooks 중 하나로 해당 예시는 UseSate를 활용하여 간단한 Counter 프로그램 만들기다. 먼저 Counter.js 파일을 생성 후 아래와 같이 소스를 작성한다. import React, {useState} from 'react'; // useState 함수 사용 function Counter() { const [number, setNumber] = useState(0); // COunter 컴포넌트 내부에 함수 작성 const onIncrease = () => { // 숫자 증가 setNumber(number + 1); } const onDecrease = () => { // 숫자 감소 setNumber(number - 1); } return ( {number} ..
2021.01.04 -
[React] 조건부 렌더링(Rendering)
조건부 렌더링(rendering)이란? 특정 조건이 참인지 거짓인지에 따라 다른 결과를 보여주는 것 먼저 App.js의 Hello 태그 안에 isSpecial을 작성한다. import React from 'react'; import Hello from './Hello'; // 현재 자신의 디렉토리에 있는 Hello 컴포넌트를 불러옴 import Wrapper from './Wrapper'; function App() { return ( {/* true 또한 Javascript 값이기 때문에 중괄호로 감싸야 한다 */} ); } export default App; Hello.js 컴포넌트로 이동하여 아래 소스를 작성한다. 해당 소스는 삼항연산자를 활용하여 isSpecial 값의 true/false 에 따라..
2021.01.04 -
[React] props를 통해 컴포넌트에게 값 전달하기
props는 properties의 줄임말이다. props는 컴포넌트를 사용하려 할 때 어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용한다. App.js import React from 'react'; import Hello from './Hello'; // 현재 자신의 디렉토리에 있는 Hello 컴포넌트를 불러옴 function App() { return ( ); } export default App; 위와 같이 작성 후 Hello.js로 이동 import React from 'react'; // 리액트를 불러와서 사용하겠다. // 함수 형태 컴포넌트 // 함수형태 컴포넌트의 첫 자리는 대문자 권장 // props 파라미터 안에는 App.js에서 넣어준 값이 객체 형태로 존재 function Hello(..
2020.12.28 -
[React] JSX 문법
JSX란 React에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다. 보기에는 HTML처럼 생겼지만 실제로는 Javascript다. 바벨이라는 도구를 사용하여 XML 형태의 코드가 Javascript로 변환이 된다. 변환되는 것을 확인하기 위하여 babeljs.io에 접속하여 아래 코드를 입력해 본다. 위 이미지의 네모 안의 createElement 함수가 컴포넌트를 만들어준다. 즉 컴포넌트를 우측 방식대로 계속 선언하는 것은 어려움이 있으니 JSX를 문법을 사용하여 XML형태로 사용하면 이것을 Javscript 형태로 변환하게끔 해주는 것이 바벨이라는 도구다. JSX 문법을 정확하게 Javascript 문법으로 변환하기 위해서는 지켜야 할 규칙들이 있다. 태그는 무조건 닫혀야 된다. (닫히는 태그가..
2020.12.28 -
[React] 첫 번째 리액트 컴포넌트
리액트 컴포넌트를 만들어 보자. 먼저 src 디렉터리에 Hello.js라는 파일을 만들고 아래와 같이 작성한다. import React from 'react'; function Hello() { return 안녕하세요 } export default Hello; 리액트 컴포넌트를 만들 땐 우선 상단에서 다음과 같은 코드를 입력해야 한다. import React from 'react'; 이 코드는 리액트를 불러와서 사용하겠다는 것을 의미한다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데, 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. 그리고 이렇게 import 구문을 통해 리액트를 불러와서 사용할 수 있는 것이다. ∴ 사실 이렇게 모..
2020.11.29 -
[React] React는 어쩌다 만들어졌을까?
리액트라는 라이브러리가 어쩌다 만들어졌는지 아는 것은 리액트를 이해하는 데 도움이 될 것이다. JavaScript를 사용해서 HTML로 구성된 UI를 제어해 봤다면 DOM(Document Object Model) - 각 HTML element에 대한 정보를 지니고 있는 JavaScript 객체 -을 변형시키기 위해 우리가 어떤 작업을 해야 하는지 익숙할 것이다. DOM을 변형하려면 브라우저의 DOM Selector API를 사용해서 특정 DOM을 선택한 뒤 특정 이벤트가 발생하면 변화를 주도록 설정해야 한다. 0 +1 -1 const number = document.getElementById("number"); const increase = document.getElementById("increase")..
2020.11.29 -
[React] styled-components 모듈 사용하기(조건 , 외부,상속)
먼저 Styled-components를 install해야 한다. vsCode를 사용하시는 분들은 아래 확장팩을 추가하시면 좀 더 편하게 styled-components를 사용하실 수 있습니다. 아래부터 예시 소스입니다. 라인별 설명은 주석처리로 상세하게 해 놓았습니다. 총 세 가지 예시입니다. styled-components 사용 예시 styled-components 외부의 javascript 코드에 바로 접근하는 예시 styled-components 상속 예시 Styled-components 예시 소스 isLoaded가 false냐 true냐 조건에 따라 화면에 complete 메시지를 보여주거나 숨겨주는 소스입니다. import React from "react"; import "./App.css"; ..
2020.10.29 -
[React] Components refactoring
재사용 가능한 컴포넌트를 활용하여 소스코드 리팩토링(refactoring) 게시판 코멘트라는 가상의 소스 코드가 있다고 친다. import React, { use State } from "react"; import "./App.css"; function App(props) { return ( {props.author.name} {props.text} {formatDate(props.date)} ); } export default App; 위 소스도 물론 작동하는 데 있어서 문제는 없다. 하지만 각각의 요소들이 반복적으로 사용될 수 있기 때문에 컴포넌트화로 리팩토링 할 수 있다. 아래 소스가 리팩토링을 거친 소스다. import React, { use State } from "react"; import "..
2020.10.27