Javascript (128) 썸네일형 리스트형 [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 에 따라.. [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(.. [React] JSX 문법 JSX란 React에서 컴포넌트의 생김새를 정의할 때 사용하는 문법이다. 보기에는 HTML처럼 생겼지만 실제로는 Javascript다. 바벨이라는 도구를 사용하여 XML 형태의 코드가 Javascript로 변환이 된다. 변환되는 것을 확인하기 위하여 babeljs.io에 접속하여 아래 코드를 입력해 본다. 위 이미지의 네모 안의 createElement 함수가 컴포넌트를 만들어준다. 즉 컴포넌트를 우측 방식대로 계속 선언하는 것은 어려움이 있으니 JSX를 문법을 사용하여 XML형태로 사용하면 이것을 Javscript 형태로 변환하게끔 해주는 것이 바벨이라는 도구다. JSX 문법을 정확하게 Javascript 문법으로 변환하기 위해서는 지켜야 할 규칙들이 있다. 태그는 무조건 닫혀야 된다. (닫히는 태그가.. [React] 첫 번째 리액트 컴포넌트 리액트 컴포넌트를 만들어 보자. 먼저 src 디렉터리에 Hello.js라는 파일을 만들고 아래와 같이 작성한다. import React from 'react'; function Hello() { return 안녕하세요 } export default Hello; 리액트 컴포넌트를 만들 땐 우선 상단에서 다음과 같은 코드를 입력해야 한다. import React from 'react'; 이 코드는 리액트를 불러와서 사용하겠다는 것을 의미한다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데, 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치된다. 그리고 이렇게 import 구문을 통해 리액트를 불러와서 사용할 수 있는 것이다. ∴ 사실 이렇게 모.. [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").. [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"; .. [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 ".. [React] Redux 특징 및 설치법 redux의 특징 one immutable store 저장소는 한 개만 가지고 있다 저장소는 불변하고 그 스토어는 단일성을 유지한다. Actions trigger changes 특정한 Actions을 사용하기 위한 다양한 연산들을 Action으로 정의하고 그 Action이 수행하고자 하는 상태 변화를 유도한다. Action의 상태 변화를 유도하고 다른 어떠한 곳에서도 데이터의 상태 변화를 접근하지 않기 때문에 단방향 적으로 흐를 수 있다. Reducers updateState 데이터 변화 시 기존 데이터의 속성이 변하지 않고 새로운 데이터를 반환 설치 경로가 중요하다. pakage.json과 동일한 경로로 이동하여 터미널에서 설치를 진행한다. 이전 1 ··· 4 5 6 7 8 9 10 ··· 16 다음
