728x90 반응형 React30 [React] state state에 대한 간단한 이해 state는 데이터가 저장되는 곳이다. 예를 들어 counter프로그램을 만들때 바닐라 js는 counter+=1을 하고 그것을 UI에 띄었다. 이걸 리액트에서는 state로 구현할 수 있다. 리액트의 좋은 점은 바뀐부분만 업데이트 된다는 것인데 만약 바닐라js의 경우 노드 정보가 바뀔 때마다 노드트리를 처음부터 다시 생성하지만 리액트는 가상돔을 써서 우리 시야에 보이는 부분만 수정해서 보여주고 모든 업데이트가 끝나면 일괄로 합쳐서 실제 돔에 던져준다고 한다! https://nomadcoders.co/react-for-beginners/lectures/3265 All Courses – 노마드 코더 Nomad Coders 초급부터 고급까지! 니꼬쌤과 함께 풀스택으로 성장하세요.. 2022. 4. 3. [React] JSX HTML에서 사용한 문법과 비슷한 문법으로 React 요소를 create 해준다. 1 2 3 4 5 6 7 const h3 = React.createElement( "h3", { id: "good", onMouseEnter: () => console.log("mouse enter") }, "HELLO I'M A SPAN"); cs 이렇게 바닐라 js로 요소를 만들어준걸 JSX 문법으로 만들면 1 2 3 const Title = console.log("moueEnter")}>Hello I'm a Ttile cs 완전 쉽게 변한것을 확인할 수 있다. const 변수명 = content props에는 id라던지 , eventListener 등등을 넣어준다. 이 상태에서 F5 누르면 에러가 뜬다. JSX 문법을.. 2022. 4. 3. [React] 배포를 위한 준비 / git push origin main 에러 해결법 react - create -app 을 활용해 배포 1. 지금 개발용 리액트 라이브러리를 사용했는데 프로덕션 용 리액트 라이브러리로 바꿔줘야 한다. 2. 바벨을 떼야한다. 바벨을 떼면 브라우저가 jsx를 이해하지 못할텐데 어떻게 가능한걸까? 브라우저에게 매번 바벨로 JS로 통역하는게 아닌 이미 통역된 JS를 올린다. (통역된 결과물만 서버에 올린다) 이걸 위해서 리액트 팀에서 만든 라이브러리인 create-react-app이 있다! 1) 간단한 앱 껍데기 2) 리액트 라이브러리 셋업(개발/프로덕션용) 3)웹팩 셋업 -> 라이브 서버, 저장할때마다 JSX->JS ++)웹팩 -> 웹개발 할 때 필요한 라이브서버 , 코드 포멧팅 등등 변환,최소화,압축등의 빌드는 웹팩에서 진행된다. 4)테스트 셋업 5)빌드 셋.. 2022. 4. 1. [React]조건부 렌더링과 setState 만약 파란색 버튼을 클릭하지 않았다면 "버튼을 눌러 사진을 저장해보세요."를 띄울 수 있게 해볼거다. 즉 setImages를 했을때 nextImages가 빈 배열이여야 한다. 그렇기에 Images 배열에 아무것도 없으면 "버튼을 눌러 사진을 저장해보세요."를 띄우고 배열에 원소가 있다면 띄우지 않게 해보겠다. 이미지를 관리하는 곳이 Images 컴포넌트이기에 여기서 수정을 해보면 --> 이런것을 조건부 렌더링이라 한다. 버튼을 한번이라도 누르면 조건문은 사라진다. 왜냐하면 setImages를 하면서 images 배열에 원소가 한개이상 있기 때문이다. (images의 초기상태가 배열임) 만약 화살표 버튼을 한번도 누르지 않았을 때는 파란색 화살표 이모지, 버튼을 한번이라도 누르면 빨간하트로 변하게 해보겠다.. 2022. 4. 1. 이전 1 2 3 4 5 6 7 8 다음 728x90 반응형
