전체 글69 [React 기초] 리액트 사이트 buid & Github Pages로 배포하기 만든 사이트를 배포하려면 작업하던 App.js 파일 그대로 올리는 것이 아니라 build용 파일을 생성한 수 그 파일을 올려야 한다. 웹 브라우저는 HTML, CSS, JS 이 3개의 언어만 해석할 수 있기 때문에 리액트의 state, jsx등은 해석하지 못 한다.그래서 리액트 프로젝트를 build 하면 브라우저 친화적인 HTML, CSS, JS 파일로 바꿔 준다.이 바꿔 준 파일을 올려야 사용자들이 웹을 볼 수 있다. 이전 포스팅들을 통해 만든 프로젝트를 Github Page를 이용해 배포해 보도록 하자. 💡 배포하기 전 체크할 사항1. 미리보기를 띄워 볼 때 콘솔창, 터미널에 에러가 발생해서는 안 된다.(warning 메시지는 사이트 구동에 별 영향이 없기 때문에 테스트할 때는 무시해도 됨).. 2024. 8. 5. [React 기초] input 다루기 보호되어 있는 글 입니다. 2024. 8. 5. [React 기초] props : 자식이 부모의 state 가져다 쓰고 싶을 때 지난 포스팅에서 글 제목을 누르면 모달창이 나타나는 기능을 만들었다.그런데 모달창 내부에도 글 제목을 넣고 싶으면 어떻게 해야 할까? 이렇게 작성하면 될 것 같지만 post라는 변수가 정의되지 않았다는 에러가 뜬다. 왜?왜냐하면 post라는 state는 function App()에 있는 것이지 function Modal()에 있는 게 아니기 때문이다.자바스크립트에서는 다른 함수에 있는 변수를 마음대로 가져다 쓸 수 없다. 하지만 컴포넌트 2개가 부모/자식 관계인 경우에는 가능하다.(다른 컴포넌트 안에 있는 컴포넌트를 자식 컴포넌트라고 부른다.)부모 컴포넌트의 state를 자식 컴포넌트로 전송해 줄 수 있고, 그러면 자식 컴포넌트도 state 사용이 가능하다.state를 전송할 때에는 props라는 문법.. 2024. 8. 2. [React 기초] map : 많은 div들을 반복문으로 줄이고 싶다면 자바스크립트 map 함수 사용하는 법모든 array 자료 우측에는 map() 함수를 붙일 수 있다. 기능 1. array에 들어있는 자료 개수만큼 그 안에 있는 코드를 반복 실행한다.위의 그림에서 console.log(1)이 3번 실행된 것을 확인할 수 있다. 기능 2. 콜백함수에 파라미터를 작성하면 그 파라미터 array 안에 있던 모든 자료를 하나씩 출력해 준다.콘솔창에 2, 3, 4가 출력된 것을 확인할 수 있다.(소괄호 안에 있는 함수를 콜백함수라고 한다) 기능 3. return 내용을 적으면 array로 담아 준다.콘솔창에서 실행해 보면 array 안에 'abcde'가 들어간 것을 확인할 수 있다. 변수에 담아서 확인해 봐도 된다. JSX 안에서 html을 반복 생성할 때는 map() .. 2024. 8. 2. [React 기초] Component : 복잡한 html을 한 단어로 축약하고 싶다면 / 동적인 UI 만들기(모달창) 들어가기 전에html 코드를 짤 때 유의해야할 점이 있다.return() 안에는 병렬로 태그 2 개 이상 기입 금지. 하나의 태그로 시작해서 하나의 태그로 끝내야 한다.그래서 두 개를 나란히 적고 싶으면 아래 같이 하나의 div로 또 감싸거나 해야 한다.이렇게 의미 없는(필요 없는) 를 사용하기 싫으면 로 감싸도 된다.이걸 fragment문법이라고 한다. 복잡한 html을 한 단어로 한 단어로 치환할 수 있는 Component 문법리액트에는 복작한 html, 많은 div들을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공하는데, 이것을 Component라고 한다. Component 문법을 이용하면 함수나 변수를 만드는 것처럼 html을 한 단어로 치환해서 원하는 곳에 넣을 수 있다. 이러면 .. 2024. 8. 2. [React 기초] state, {useState}, useState() 함수 들어가기 전에return() 안에는 병렬로 태그 2 개 이상 기입 금지.하나의 태그로 시작해서 하나의 태그로 끝내야 한다. 리액트에서 자료를 잠깐 저장할 때에는 변수를 사용하고 html에 {데이터바인딩}도 할 수 있다. 하지만 중요한 데이터를 저장할 때에는 변수 대신 state를 사용한다. State란?- 변수 대신 쓰는 데이터 저장 공간.- useState()를 이용해 만들어야 한다.- 문자, 숫자, array, object, boolean 전부 저장 가능하다.- 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.(state가 변경될 경우 component가 재렌더링 되기 때문에 렌더링,데이터 흐름에 사용되는 값을 포함하면 불필요한 렌더링이 발생해 성능을 저하시킬 수 있음) .. 2024. 8. 1. 이전 1 ··· 8 9 10 11 12 다음
