조건부 렌더링이 뭘까 싶었더니 조건에 따라 어떤 Component를 rendering 하느냐의 의미였던것같다. React 자습서의 예시 코드를 보면 쉽게 이해할 수 있었다. function UserGreeting(props) { return Welcome back!; } function GuestGreeting(props) { return Please sign up.; } function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; ///////////////////// 여기 } return ; ///////////////////// 여기! } ReactDOM.render( // Try changing ..

어떤 프로그래밍 언어든 직접 해보지 않으면, 내가 배운것이 다가 아니라는 것을 계속 깨닫게 된다. React 공홈을 통해 배운 것을 하나로 뭉쳐서 뭘 만들 수 있을까 고민해보다가 state, component 등을 한눈에 볼 수 있는 stop watch로 정했다. 무엇을 구현할지는 아래와 같이 정했다. 1. Start, Stop 버튼 클릭시 stopwatch 실행, 중단 2. Records 버튼 클릭시 현재 시간 기록 3. Reset 버튼 클릭시 전체 초기화 (시간, records 기록 모두 초기화) 1. html 에 넣을 component를 먼저 구현 2. render 부분에 어떤 것을 넣을지 고민해서 시간을 표시하는 Indicator 부분과 버튼부분, records 부분으로 나누었다. (그리고, 상태..

React 공홈에서는 아래와 같은 규칙이 있다고한다. - React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용합니다. - JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. html 과 React의 차이를 보면 한번에 알 수 있었다. Activate Lasers Activate Lasers 또한, 태그가 가지는 고유한 기능(?) 을 사용하지 않기위해 아래와 같이 사용하지만, React 에서는 명시적으로 고유한 기능을 쓰지 않을거라고 알려주어야한다. (preventDefault를 사용하면 된다.) Submit // React function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You ..

예전에 React-Native앱을 만들 당시 state, lifecycle 과 씨름한 적이 있었는데, 공식문서에서 만나보니 또 새롭다. 다른 형태의 App들도 그렇듯, lifecycle은 꼭 먼저 살펴보고 지나가는 것이 좋았었다. 이전 강좌를 통해 배운 것은 setInterval을 통해 rerendering 하는 방법을 배웠었다. (아래처럼) function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); state 라는 녀석을 사용하게 되면, s..

3장에서는 React를 이루는 가장 작은 단위인 Element에 대해서 알아 봤었다. 이번 4장에서는 재사용이 가능한 Component와 props - 속성(properties) 에 대해서 배울 수 있다. Component를 정의하는 방법1 - Javascript 함수 작성 function Welcome(props) { return Hello, {props.name}; } Component를 정의하는 방법2 - ES6 Class 사용 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 딱 봐도 1번 방법이 생산성면에서 좋아보인다. (간결성이 2번 방법에 비해 좋기때문에) 이렇게 만든 Component..

약 4년전쯤 React-Native를 통해 Android, IOS App을 만들어보았었지만, 자세하게 하나하나 확인하면서 만들지 않았었던 기억이 있었습니다. 알고보면 별거 아니었을 수도 있었겠지만, 이해하다보면 더 재밌는 것들을 발견할 수 있지 않을까 싶어 React 공식 문서를 통해 self study 를 시작합니다. React 게시물의 글들은 모두 React 공식 문서를 통해 재해석한 내용을 나중에 혼자 찾아볼 수 있는 용도로 씁니다~! 글에 잘못된 내용이 있을 수도 있으므로 해당 포스팅을 보시는 분은 꼭 공홈을 참고해주세요~! https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for build..