본문 바로가기
[React] Router 안녕하세요. 이번엔 router를 알아보겠습니다. 차례 0. Router 1. 시작하기 2. Routing 3. Link 4. URL 파라미터 5. 프로젝트 0. Router 보통 router라 하면, 여러 네트워크를 연결하면서, A 지점에서 B 지점으로 가는 가장 최적의 경로를 찾아주는 장치를 의미합니다. 마찬가지로 웹에선, url을 이동하는 방식 중 하나로, react에서는 페이지를 불러오지 않고 데이터에 따라 페이지를 렌더링 해주는 역할을 합니다. react에서 특별히 router를 쓰는 이유는 a href로 페이지를 이동하면 불러오면서 데이터를 잃기 때문입니다. react에서 component와 props를 통해 데이터를 넘길 수 있는데, 이를 활용해 페이지 사이로 데이터를 연결시킬 수 있습니다... 2023. 2. 19.
[React] JSON 파일 넣기 안녕하세요. 이번에는 데이터나 쿠키로 많이 쓰이는 JSON 파일을 로컬로 넣는 방법을 보겠습니다. 0. JSON JSON은 JavaScript Object Notation, 즉 객체 문법으로 구조화된 데이터를 표현하는 방식입니다.  javascript에서 객체는 다음과 같이 표현됩니다.let dictionary = {"id":1, "date":20220401, "contents":"dodo1"}   형태를 일치시키기만 한다면 배열로 나열할 수도 있습니다. JSON은 이 데이터만 따로 파일로 만든겁니다. 확장자는 '.json'이고, python/C/Java 등에서도 사용할 수 있습니다.  주의할 점은 vanilla javascript에선 괜찮지만, json 파일로 쓰거나 react에서 쓸 땐 모든 문자열을.. 2023. 2. 17.
[React] 열고 닫는 버튼 만들기 안녕하세요. 이번엔 useState를 이용한 열고 닫는 버튼을 만들어 볼겁니다. 먼저 useState로 변수를 만듭니다. 초기값은 boolean(false)입니다. let [closer, setCloser] = useState(false) 다음으로 버튼을 만듭니다. 버튼은 눌렀을 때 boolean이 바뀌도록 만들어야 합니다. boolean의 반대를 의미하는 !연산자를 써줍니다. setCloser(!closer)}>X 마지막으로 버튼을 눌렀을 때 띄울 컴포넌트, 또는 태그들을 만듭니다. 또, boolean이 참일 때 그 요소들이 나타나게 만들어야 하니, 조건문을 추가하면 됩니다. 삼항 연산자가 이럴 때 편합니다. {closer ? 오 이게 되네 : null} 버튼을 눌러 closer가 true로 바뀌면 조.. 2023. 2. 17.
[React] Hook (feat. useState, useEffect) 안녕하세요. 이번에 볼거는 react의 또다른 핵심 기능인 Hook이라는 것입니다. (2023.05.10 글 업데이트) 차례 0. Hook 1. useState 1-1. onClick 1-2. 배열 2. useEffect 2-1. title 0. Hook hook은 갈고리라는 뜻으로, 데이터를 갈고리로 낚아채 다시 업데이트 시키는 역할을 하게 됩니다. (전문용어로는 상태 로직을 추상화한다고 하는데, 솔직히 이해는 못했습니당.) 따라서 변수를 업데이트하거나 이벤트를 반복해야 할 때, 즉, SNS 처럼 동적인 페이지를 만들기 위해 사용하게 됩니다. 종류로는 useState, useEffect, useRef 등이 있습니다. 사용하기 위해선 맨 윗줄에 모듈을 호출해야 합니다. import React, {useS.. 2023. 2. 17.
[React] 삼항 연산자 (if 한 줄로 쓰기) 안녕하세요. 이번엔 특히 react에서 자주 쓰이는 표현인 삼항 연산자를 보겠습니다. 차례 0. if 1. 삼항 연산자 0. if 먼저 if를 보면, if({조건}){ 실행할 거 }else if({조건}){ 실행할 거 }else{ 실행할 거 } if가 제일 먼저 나오고, else if는 if에서 해당되지 않는 부분에서 다시 조건을 봅니다. 그러다 최종 나머지는 else에서 실행됩니다. react 주의해야 할 점은, vanilla javascript에서는 else if없이 if만 써도 되고, else를 생략해도 되지만, react에선 if 다음 조건문은 else if가 와야하고, 여러 조건을 사용한 경우 마지막에 else가 생략되면 오류를 뿜습니다. 1. 삼항 연산자 react에서, 특히 return 안에.. 2023. 2. 16.
[React] 컴포넌트와 props (feat. 배열 함수) 이번엔 react의 꽃인 컴포넌트를 만들어보겠습니다. 차례 1. Components 1-1. 외부 파일에서 컴포넌트 만들기 1-2. props 2. 배열 2-1. forEach 2-2. map 2-2-1. forEach vs map 2-3. filter 2-4. sort 1. Components 컴포넌트는 react의 핵심 기능 중 하나로, 자주 쓸만한, 또는 반복되는 요소들을 따로 함수처럼 선언해서 쓸 수 있게 만든 겁니다. 쉽게 말하면 레고 블럭으로 무언가 만드는 겁니다. 쓰는 방법 자체는 쉽습니다. 함수처럼 선언하고, html 태그 처럼 씁니다. 마찬가지로 html 태그처럼 두 가지 방식으로 쓸 수 있습니다. 컴포넌트는 함수의 return안의 내용을 그대로 태그 안에 넣어줍니다. App()안에 썼던.. 2023. 2. 16.
[React] 시작하기 최근 프로젝트 하나를 시작했는데, 이번에야 말로 react 공부를 해야겠다 싶어서 도전했는데 드디어 해냈습니다. (ㅎ) 그래서 제가 이해한 기초적인 부분에 대해 정리해보고자 합니다. 먼저 드릴 말씀은, react는 기본적으로 javascript의 라이브러리로서 javascript를 거의 그대로 사용하기 때문에, javascript를 기본적으로 다룰 줄 알고 시작해야 합니다. 차례 0. Node.js 1. react 시작하기 2. 페이지 만들기 2-1. 디렉토리 2-2. App.js 2-3. javascript 넣기 3. 기타 팁 3-1. className 3-2. 이미지 넣기 3-3. a href 4. 발행 0. Node.js https://nodejs.org/en/ Node.js Node.js® is .. 2023. 2. 16.
[hjs] id / class / name 안녕하세요. 이번엔 js와 html에서 id, class, name의 차이점을 알아보겠습니다. 차례 0. 개념 0-1. id 0-2. class 0-3. name 1. 차이점 0. 개념 0-1. id identification을 의미하며, 로그인 할 때 id 중복 확인을 하는 것처럼, 중복되지 않는 식별자를 줍니다. 특정 위치에 있는 걸 콕집어 주기위해 사용합니다. HTML 삽입 미리보기할 수 없는 소스 getElementById : id을 가진 요소를 받아준다. innerText : 요소 내에 입력된 모든 내용을 텍스트로 받아준다. innerHTML : 요소 내에 입력된 내용을 html 코드로 받아준다. - 둘 다 내용을 변경시킬 수 있다. 특이한 점은 div 태그에는 소용이 없는 value와 오타가 .. 2023. 1. 19.

티스토리툴바