본문 바로가기

💻 Deep Wide Programming/React

(7)

[React JS] 리액트 기본 학습 메모 1. Node, npm, npx, git 설치 1.node.js 설치(홈페이지에서. 설치확인 : node -v / npm 설치확인 : npm -v) 2. 콘솔에서 npm install npx -g (설치확인: npx -v) 3. VSC 설치(다른 코드 에디터 써도 됨) 4. git 설치(설치 확인:콘솔에서 git --version) 리액트 컴파일 create-react-app 리액트의 코드는 브라우저가 이해할 수 없기 때문에, 이것을 셋업하기 위해 Web pack과 Babel을 다운로드 해야하고, 컴파일을 하는 그런 복잡하고 귀찮은 작업이 필요했다. 그런데, 이제는 create-react-app이라는 걸 통해서, 하나의 명령으로 React Web app을 Set up하게 되었다. 1. node js np..

[생활코딩 리액트] 이벤트 state 변경하기 (feat. bind 함수, setState함수) 📌이벤트 설치 (1); 테스트 (링크 클릭시, alert창 띄우기) 📌이벤트 설치 (2); 다음페이지로 이동 중지 📌"mode 설정 & render 부분"과 "이벤트를 설치한 부분"을 연결해주면 된다. ⇢🔗 연결시키는 방법 *이벤트 함수 안에서 'this'의 값은 아무것도 가리키지 않게 되기 때문에 오류가 뜬다.* ⇢ 이벤트 함수 바로 뒤에, '.bind(this)'를 추가하여 this의 값을 생성할 수 있다. ✚ 또 하나의 작업이 필요하다. 리액트의 언어 'setState({})'로 모드를 전환해주어야 작동하기 때문. this.state.mode = 'Greeting'; 으로는 작동하지 않는다. 리액트 언어로 모드 전환을 해주니, 비로소 위에서 세팅해준 greeting의 모드의 값들로 로드가 되었다. ..

[생활코딩 리액트] 14. 별도의 파일로 컴포넌트 정리, 15. state 1. props : 사용자가 컴포넌트를 사용할 때 중요한 것이고, 2. state는 그 props 값에 따라 내부에서 구현에 필요한 데이터들이다. : 좀더 다양한 일을 하는 컴포넌트를 만들기 위해 필요한 state의 개념! props를 더 잘 활용할 수 있게 될 것. 위의 코드 안에 컴포넌트 요소들 title, sub 값들을 저렇게 적어주는게 지저분해서 위로 썁 하고 따로 빼주려고 한다. 그때 필요한 것이 바로 하단의 constructor(props){ super(props); here it goes } 저기 안에 필요한 코드를 넣어주는 것이다. 요기 담긴 코드들이 가장 먼저 실행되게 된다. 하단의 코드와 같이 수정!

[생활코딩 리액트] 리액트를 도와주는 크롬 확장앱 리액트 디벨로퍼 툴을 깔고, 기존에 만들어놨던 웹의 inspect로 들어가니, 새로운 탭이 생성되었다. 이곳에서 원래는 파악할 수 없었던 리액트 코드를 발견가능해졌다. 대박!

[생활코딩 리액트] props를 사용한 리팩토링 📌Props 공식문서 참고! reactjs.org/docs/getting-started.html Getting Started – React A JavaScript library for building user interfaces reactjs.org 컴포넌트 만드는 법이다. class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 하이라이트된 부분에 주목하자 📌적용해보기 📌나도 해보자

[생활코딩 리액트] 10-11강 컴포넌트 만들기 📌리액트 본격 사용연습 시작 리액트 없이 만든 html 환경을, 리액트의 컴포넌트를 활용해서 remade하도록 할 것이다. 이렇게 심플한 html 연습 파일을 하나 만들어준 뒤, 리액트의 src 디렉토리의 App.js를 열어준다. class App extends Component { render() { return ( Hello react!! ); } } 바로 이부분이 컴포넌트를 만드는 코드다. (말하자면 템플릿 같은 것으로 이해하자. 객체지향을 이해하면 좀 더 잘 이해할 수 있지만 여기서는 일단 패스) 📌를 Subject라는 컴포넌트로 만들기 📌이때, 주의사항! 1. 컴포넌트를 만들 때는 반드시, 하나의 최상위 태그만을 포함해야 한다. 2. 컴포넌트 이름은 대문자로 시작한다. 실제 App.js에는 태그..

[생활코딩 리액트] 1-7강 리액트 기본, 공부전략, 학습환경 설정 1. 리액트- 컴포넌트기능 1) 가독성을 높여줌 2) 재사용성을 높여줌 3) 유지보수가 훨씬 더 편리해짐 2. 리액트 공부 전략 📌공부 Tip 리액트 공식문서와 친해지기 * reactjs.org * 3. 리액트 학습환경 코드샌드박스를 이용해 간편한 리액트 학습환경을 사용할 수 있다. codesandbox.io/s/new React - CodeSandbox React example starter project codesandbox.io 4. Terminal을 통해 create-react-app install을 마친뒤, VS code의 터미널에서 다음의 코드를 입력한다. npm run start 라고 치고 엔터를 눌러 실행한다. (종료를 원할때는 command + c를 누른다.) 요런 화면들이 뜨게 된다. ..

이전 1 다음

728x90

티스토리툴바